BUY NOW $24
Layouts
Default
Compact Sidebar
Fixed Header
Sticky Sidebar
Boxed Wrapper
Static
Skins
Material design

Progress

Default

To caption a progress bar, simply add a <div> with your caption text and associate the caption with the <progress> element using the aria-describedby attribute.

Reticulating splines… 0%
Reticulating splines… 25%
Reticulating splines… 50%
Reticulating splines… 75%
Reticulating splines… 100%
IE9 support

Internet Explorer 9 doesn’t support the HTML5 <progress> element, but we can work around that.

Reticulating splines… 25%
Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

Striped

Uses a gradient to create a striped effect.

Size

Add .progress-lg or .progress-sm for additional sizes.

10% 25% 50%
Skill bars

PHP 75%

100%

RUBY 40%

100%

HTML 100%

100%