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