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%
© 2015. Limitless Web App Kit by Eugene Kopyov