Content loaders
Animatedcontent 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
Themes for pace.js extensionSmall bar theme
By including theme_bar_sm.scss file
Small bar with text
Uncomment piece of CSS code to show text
Default bar theme
By including theme_bar.scss file
Default bar with text
Uncomment piece of CSS code to show text
Large bar theme
By including theme_bar_lg.scss file
Large bar with text
Uncomment piece of CSS code to show text
Small Xbox theme
By including theme_xbox_sm.scss file
Perspective theme
By including theme_perspective.scss file
Corners theme
By including theme_corners.scss file
Default Xbox theme
By including theme_xbox.scss file
Squares theme
By including theme_squares.scss file
Radar theme
By including theme_radar.scss file
Large Xbox theme
By including theme_xbox_lg.scss file
Tail theme
By including theme_tail.scss file
Circle tail theme
By including theme_tail_circle.scss file
Progress bars
Basic progress bar optionsDefault progress bar
Example of a basic progress bar
Progress bar with label
Remove .sr-only class to show label
Striped progress bar
Using .progress-bar-striped class
Rounded progress bar
Using .rounded-pill class
Animated progress bar
Using .progress-bar-animated classes
Stacked progress bars
Multiple bars in the .progress block
Contextual alternatives
Predefined progress bar colorsBasic progress bars
Progress bars contextual alternatives
Striped progress bars
Progress bars contextual alternatives
Animated progress bars
Progress bars contextual alternatives
Bar height variations
How progress bars height is handledBasic progress bars
Basic bars with height variations
Striped progress bars
Striped bars with height variations
Animated progress bars
Animated bars with height variations
Horizontal bars
Advancedhorizontal bars
Left progress bar
Left animated progress bar
Right progress bar
Right animated progress bar
Left percentages
Percentages display in the bar
Right percentages
Percentages display in the bar
Left custom text
Text displays in progress bar
Right custom text
Text displays in progress bar
Vertical bars
Advancedvertical bars
Top progress bars
Top animated progress bars
Bottom progress bars
Bottom animated progress bars
Top percentages
Top bars with percentage text
Bottom percentages
Bottom bars with percentage text
Top custom text
Top bars with custom text
Bottom custom text
Bottom bars with custom text