Pure CSS3 Capsulated Progress Bar
Capsule like progress bar with markers made by Greg Mathews. If you do not want the quarter markers just remove the ul
. If you remove the span
you will have to change the css for the .inner p
to be 7 less than the width of the progress bar so that the fractions line up! To add different segments ie. 10th markers, add 10 li
's and change their to about 9%
.
The grey border is achieved with box-shadow
and the animations have been done with CSS3 keyframes
and animation
. Internet Explorer has no support for CSS animations below version 10.