Progress Bars
Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.Basic example
Default progress bar.
Striped example
Uses a gradient to create a striped effect.Use class .progress-bar-striped.
Sizes example
Use class .progress-sm,.progress-mdand .progress-lg.
Animated example
Add .activeto .progress-bar-stripedto animate the stripes right to left.
Completed example
Remove the <span>with .sr-onlyclass from within the progress bar to show a visible percentage.
Stacked example
Place multiple bars into the same .progressto stack them.