#### Components - Progress

Statistics Invoices Schedule

###### 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

Themes for pace.js extension

###### Small bar theme

By including `theme_bar_sm.scss` file

###### Small bar with text

Uncomment piece of CSS code to show text

60%

###### Default bar theme

By including `theme_bar.scss` file

###### Default bar with text

Uncomment piece of CSS code to show text

60%

###### Large bar theme

By including `theme_bar_lg.scss` file

###### Large bar with text

Uncomment piece of CSS code to show text

60%

###### Small Xbox theme

By including `theme_xbox_sm.scss` file

60%

###### Perspective theme

By including `theme_perspective.scss` file

60%

###### Corners theme

By including `theme_corners.scss` file

60%

###### Default Xbox theme

By including `theme_xbox.scss` file

60%

###### Squares theme

By including `theme_squares.scss` file

60%

###### Radar theme

By including `theme_radar.scss` file

60%

###### Large Xbox theme

By including `theme_xbox_lg.scss` file

60%

###### Tail theme

By including `theme_tail.scss` file

60%

###### Circle tail theme

By including `theme_tail_circle.scss` file

60%

###### Progress bars

Basic progress bar options

###### Default progress bar

Example of a basic progress bar

50% Complete

###### Progress bar with label

Remove `.sr-only` class to show label

85% Complete

###### Striped progress bar

Using `.progress-bar-striped` class

50% Complete

###### Rounded progress bar

Using `.rounded-round` class

85% Complete

###### Animated progress bar

Using `.progress-bar-animated` classes

50% Complete

###### Stacked progress bars

Multiple bars in the `.progress` block

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 `horizontal` bars

###### 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 `vertical` bars

###### 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%