Ajax Loader
×

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.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript

    Pure CSS3 Capsulated Progress Bar

    CSSDeck G+