#### Components - Loaders

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 With light and dark overlays

###### Mini bar theme

By loading `theme_bar_xs.css` file

###### Mini bar with text

Uncomment piece of CSS code to show text

60%

###### Small bar theme

By loading `theme_bar_sm.css` file

###### Small bar with text

Uncomment piece of CSS code to show text

60%

###### Default bar theme

By loading `theme_bar.css` file

###### Default bar with text

Uncomment piece of CSS code to show text

60%

###### Mini Xbox theme

By loading `theme_xbox_xs.css` file

60%

###### Perspective theme

By loading `theme_perspective.css` file

60%

###### Corners theme

By loading `theme_corners.css` file

60%

###### Small Xbox theme

By loading `theme_xbox_sm.css` file

60%

###### Squares theme

By loading `theme_squares.css` file

60%

###### Radar theme

By loading `theme_radar.css` file

60%

###### Default Xbox theme

By loading `theme_xbox.css` file

60%

###### Tail theme

By loading `theme_tail.css` file

60%

###### Circle tail theme

By loading `theme_tail_circle.css` 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-striped` class

50% Complete

###### Rounded progress bar

Using `.progress-rounded` class

85% Complete

###### Animated progress bar

Using `.progress-striped.active` classes

50% Complete

###### Stacked progress bars

Multiple bars in the `.progress` block

20% Complete
30% Complete (danger)
40%

##### Progress bar sizes

By default, Bootstrap supports only 1 progress bar size. Limitless template extends default sizing up to 5 additional height sizing: large, small, mini, extra mini and micro. To use, just add `.progress-lg (*-sm, *-xs, *-xxs, *-micro)` class to the container with base `.progress` class. Micro progress bar is the thinest bar with fixed 1px height.

Large progress bar

15% Complete

Default progress bar

30% Complete

Small progress bar

45% Complete

Mini progress bar

60% Complete

Extra small progress bar

75% Complete

Micro progress bar

90% Complete

###### Contextual alternatives Predefined progress bar colors

###### Basic progress bars

Progress bars contextual alternatives

15% Complete
35% Complete (danger)
55% Complete (success)
75% Complete (warning)
95% Complete (info)

###### Striped progress bars

Progress bars contextual alternatives

15% Complete
35% Complete (danger)
55% Complete (success)
75% Complete (warning)
95% Complete (info)

###### Animated progress bars

Progress bars contextual alternatives

15% Complete
35% Complete (danger)
55% Complete (success)
75% Complete (warning)
95% Complete (info)

###### Horizontal bars Advanced `horizontal` bars

###### Left progress bar

Left animated progress bar

0%

###### Right progress bar

Right animated progress bar

0%

###### Filled percentages

Percentages display in the bar

0%

###### Filled custom text

Text displays in progress bar

0%

###### Centered percentages

Percentages display in the center

0%

###### Centered custom text

Text displays in the bar center

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%

###### Filled percentages

Percentages display on top

0%
0%
0%

###### Filled custom text

Custom text displays on top

0%
0%
0%

###### Centered percentages

Percentages display in the center

0%
0%
0%

###### Centered custom text

Text displays in the bar center

0%
0%
0%