Components - Loaders
Content loaders
Animated content icon loaders
Content loading spinner 1
Using icon-spinner spinner classes
Content loading spinner 2
Using icon-spinner2 spinner classes
Content loading spinner 3
Using icon-spinner3 spinner classes
Content loading spinner 4
Using icon-spinner4 spinner classes
Content loading spinner 5
Using icon-spinner6 spinner classes
Content loading spinner 6
Using icon-spinner9 spinner classes
Content loading spinner 7
Using icon-spinner10 spinner classes
Content loading spinner 8
Using icon-spinner11 spinner classes
Content loading spinner 9
Using icon-sync spinner classes
Page loaders With light and dark overlays
Mini bar theme
By loading theme_bar_xs.css file
Mini bar with text
Uncomment piece of CSS code to show text
Small bar theme
By loading theme_bar_sm.css file
Small bar with text
Uncomment piece of CSS code to show text
Default bar theme
By loading theme_bar.css file
Default bar with text
Uncomment piece of CSS code to show text
Mini Xbox theme
By loading theme_xbox_xs.css file
Perspective theme
By loading theme_perspective.css file
Corners theme
By loading theme_corners.css file
Small Xbox theme
By loading theme_xbox_sm.css file
Squares theme
By loading theme_squares.css file
Radar theme
By loading theme_radar.css file
Default Xbox theme
By loading theme_xbox.css file
Tail theme
By loading theme_tail.css file
Circle tail theme
By loading theme_tail_circle.css file
Progress bars Basic progress bar options
Default progress bar
Example of a basic progress bar
Progress bar with label
Remove .sr-only class to show label
Striped progress bar
Using .progress-striped class
Rounded progress bar
Using .progress-rounded class
Animated progress bar
Using .progress-striped.active classes
Stacked progress bars
Multiple bars in the .progress block
By default, Bootstrap supports only 1 progress bar size. Limitless template extends default sizing up to 5 additional height sizing: large, small, mini, extra mini and micro. To use, just add .progress-lg (*-sm, *-xs, *-xxs, *-micro) class to the container with base .progress class. Micro progress bar is the thinest bar with fixed 1px height.
Large progress bar
Default progress bar
Small progress bar
Mini progress bar
Extra small progress bar
Micro progress bar
Contextual alternatives Predefined progress bar colors
Basic progress bars
Progress bars contextual alternatives
Striped progress bars
Progress bars contextual alternatives
Animated progress bars
Progress bars contextual alternatives
Horizontal bars
Advanced horizontal bars
Left progress bar
Left animated progress bar
Right progress bar
Right animated progress bar
Filled percentages
Percentages display in the bar
Filled custom text
Text displays in progress bar
Centered percentages
Percentages display in the center
Centered custom text
Text displays in the bar center
Vertical bars
Advanced vertical bars
Top progress bars
Top animated progress bars
Bottom progress bars
Bottom animated progress bars
Filled percentages
Percentages display on top
Filled custom text
Custom text displays on top
Centered percentages
Percentages display in the center
Centered custom text
Text displays in the bar center