Pure CSS3 Capsulated Progress Bar

devilsbackyard

• 14414
• 6
• 0

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.

Related:

• CSS Only Solar System Model
• Minions in pure CSS
• Multiple Box Shadows
• Clicking Game
• CSS3 Room