Content loaders
Animated contenticon 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 extension
Small bar theme

By including theme_bar_sm.scssfile

Small bar with text

Uncomment piece of CSS code to show text

60%
Default bar theme

By including theme_bar.scssfile

Default bar with text

Uncomment piece of CSS code to show text

60%
Large bar theme

By including theme_bar_lg.scssfile

Large bar with text

Uncomment piece of CSS code to show text

60%
Small Xbox theme

By including theme_xbox_sm.scssfile

60%
Perspective theme

By including theme_perspective.scssfile

60%
Corners theme

By including theme_corners.scssfile

60%
Default Xbox theme

By including theme_xbox.scssfile

60%
Squares theme

By including theme_squares.scssfile

60%
Radar theme

By including theme_radar.scssfile

60%
Large Xbox theme

By including theme_xbox_lg.scssfile

60%
Tail theme

By including theme_tail.scssfile

60%
Circle tail theme

By including theme_tail_circle.scssfile

60%
Progress bars
Basic progress bar options
Default progress bar

Example of a basic progress bar

50% Complete
Progress bar with label

Remove .sr-onlyclass to show label

85% Complete
Striped progress bar

Using .progress-bar-stripedclass

50% Complete
Rounded progress bar

Using .rounded-roundclass

85% Complete
Animated progress bar

Using .progress-bar-animatedclasses

50% Complete
Stacked progress bars

Multiple bars in the .progressblock

20% Complete
30% Complete (danger)
40%
Contextual alternatives
Predefined progress bar colors
Basic progress bars

Progress bars contextual alternatives

15% Complete
30% Complete
45% Complete
60% Complete
75% Complete
90% Complete
Striped progress bars

Progress bars contextual alternatives

15% Complete
30% Complete
45% Complete
60% Complete
75% Complete
90% Complete
Animated progress bars

Progress bars contextual alternatives

15% Complete
30% Complete
45% Complete
60% Complete
75% Complete
90% Complete
Bar height variations
How progress bars height is handled
Basic progress bars

Basic bars with height variations

18% Complete
36% Complete
54% Complete
72% Complete
90% Complete
Striped progress bars

Striped bars with height variations

18% Complete
36% Complete
54% Complete
72% Complete
90% Complete
Animated progress bars

Animated bars with height variations

18% Complete
36% Complete
54% Complete
72% Complete
90% Complete
Horizontal bars
Advanced horizontalbars
Left progress bar

Left animated progress bar

0%
Right progress bar

Right animated progress bar

0%
Left percentages

Percentages display in the bar

0%
Right percentages

Percentages display in the bar

0%
Left custom text

Text displays in progress bar

0%
Right custom text

Text displays in progress bar

0%
Vertical bars
Advanced verticalbars
Top progress bars

Top animated progress bars

0%
0%
0%
Bottom progress bars

Bottom animated progress bars

0%
0%
0%
Top percentages

Top bars with percentage text

0%
0%
0%
Bottom percentages

Bottom bars with percentage text

0%
0%
0%
Top custom text

Top bars with custom text

0%
0%
0%
Bottom custom text

Bottom bars with custom text

0%
0%
0%