Skip to content

Elements:Progress Bars

Default

You can use inline style tags or the width utilities to control the amount of the progress bar that is filled.


Labels within progress bars

50% Complete!

Sizes

Small

Default

Large


Colours

Standard Bootstrap contextual colours are available: .progress-success .progress-info .progress-warning .progress-danger


Striped

Add the class .progress-striped the give the striped effect to default or coloured progress bars.


Multiple Bars

You can also include multiple .progress-bar elements within the .progress element.

With labels

CSS
HTML
PHP

Animated Progress Width

Add the attribute data-toggle="progress-bar-animated-progress" to the .progress-bar element to make the progress bar width animate from 0 to the aria-valuenow value when it comes into view on screen.

Animated progress bars do not work in IE9, IE10+, Microsoft Edge or Opera 12


Animated Striped

Add the class .progress-bar-animated to the .progress-bar element to the give the striped effect to default or coloured progress bars.
Animated progress bars do not work in IE9, IE10+, Microsoft Edge or Opera 12

Awesome Features

99.9% Uptime / Free Upgrades / Fully Responsive / Bug Free
Theme Colours

Green Red Blue Purple Pink Orange Lime Blue-dark Red-dark Brown Cyan-dark Yellow Slate Olive Teal Green-bright

Cookies are NOT enabled so colour selection is not persistent.

Back to main homepage

Back to intro page