Adminity : Progress Bar

Basic Progress Bar

To create a default progress bar, add a .progressclass to a <div>element:

Progress Bar With Label

Remove the .sr-onlyclass from the progress bar to show a visible percentage:

70%

Colored Progress Bars

The contextual classes that can be used with progress bars are .progress-bar-primary, .progress-bar-success, .progress-bar-info, .progress-bar-danger,

40% Complete (primary)

40% Complete (success)

50% Complete (info)

60% Complete (warning)

70% Complete (danger)

Striped Progress Bars

Add class .progress-bar-stripedto add stripes to the progress bars:

40% Complete (primary)

40% Complete (success)

50% Complete (info)

60% Complete (warning)

70% Complete (danger)

Animated Progress Bar

Add class .activeto animate the progress bar:

40%

50%

60%

70%

Stacked Progress Bars

Create a stacked progress bar by placing multiple bars into the same <div class="progress">:

Free Space

Warning

Danger