Commit d6c824d1 authored by Leigh B Stoller's avatar Leigh B Stoller

HTML/CSS impl of progress bubbles. Found it here:

http://stackoverflow.com/questions/5213753/build-step-progress-bar-css-and-jquery

Simple, but does not really work well enough with bootstrap, it is
going to take more work if we want to use it for more then the imaging
progress modal.
parent 898c33f3
/*
* Progress bubbles.
* http://stackoverflow.com/questions/5213753/build-step-progress-bar-css-and-jquery
*/
ol.progtrckr {
margin: 0;
padding: 0;
list-style-type none;
}
ol.progtrckr li {
display: inline-block;
text-align: center;
line-height: 3em;
}
ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
ol.progtrckr[data-progtrckr-steps="3"] li { width: 30%; }
ol.progtrckr[data-progtrckr-steps="4"] li { width: 22%; }
ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }
ol.progtrckr li.progtrckr-done {
color: black;
border-bottom: 4px solid yellowgreen;
}
ol.progtrckr li.progtrckr-todo {
color: silver;
border-bottom: 4px solid silver;
}
ol.progtrckr li:after {
content: "\00a0\00a0";
}
ol.progtrckr li:before {
position: relative;
bottom: -2.5em;
float: left;
left: 50%;
line-height: 1em;
}
ol.progtrckr li.progtrckr-done:before {
content: "\2713";
color: white;
background-color: yellowgreen;
height: 1.2em;
width: 1.2em;
line-height: 1.2em;
border: none;
border-radius: 1.2em;
}
ol.progtrckr li.progtrckr-todo:before {
content: "\039F";
color: silver;
background-color: white;
font-size: 1.5em;
bottom: -1.6em;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment