Content loaders
Animatedcontenticon loaders
Content loading spinner 1
Using icon-spinner spinnerclasses
Content loading spinner 2
Using icon-spinner2 spinnerclasses
Content loading spinner 3
Using icon-spinner3 spinnerclasses
Content loading spinner 4
Using icon-spinner4 spinnerclasses
Content loading spinner 5
Using icon-spinner6 spinnerclasses
Content loading spinner 6
Using icon-spinner9 spinnerclasses
Content loading spinner 7
Using icon-spinner10 spinnerclasses
Content loading spinner 8
Using icon-spinner11 spinnerclasses
Content loading spinner 9
Using icon-sync spinnerclasses
Page loaders
Themes for pace.js extensionSmall bar theme
By including theme_bar_sm.scssfile
Small bar with text
Uncomment piece of CSS code to show text
Default bar theme
By including theme_bar.scssfile
Default bar with text
Uncomment piece of CSS code to show text
Large bar theme
By including theme_bar_lg.scssfile
Large bar with text
Uncomment piece of CSS code to show text
Small Xbox theme
By including theme_xbox_sm.scssfile
Perspective theme
By including theme_perspective.scssfile
Corners theme
By including theme_corners.scssfile
Default Xbox theme
By including theme_xbox.scssfile
Squares theme
By including theme_squares.scssfile
Radar theme
By including theme_radar.scssfile
Large Xbox theme
By including theme_xbox_lg.scssfile
Tail theme
By including theme_tail.scssfile
Circle tail theme
By including theme_tail_circle.scssfile
Progress bars
Basic progress bar optionsDefault progress bar
Example of a basic progress bar
Progress bar with label
Remove .sr-onlyclass to show label
Striped progress bar
Using .progress-bar-stripedclass
Rounded progress bar
Using .rounded-roundclass
Animated progress bar
Using .progress-bar-animatedclasses
Stacked progress bars
Multiple bars in the .progressblock
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
Advancedhorizontalbars
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
Advancedverticalbars
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