7 #loaders Loaders

Basic loading classes

Source: src/css/components/loading.less, line 1

7.1 #loaders.big-loader .big-loader

Basic pure CSS big loader, https://projects.lukehaas.me/css-loaders/

Example

Markup

<div class="wrapper-el bg-gray">
             <div class="big-loader" style="left: 50%;"></div>
        </div>

Source: src/css/components/loading.less, line 102

Just small rotating circle to be used as mixin whenver

Example

Markup

<div class="loading-circle"></div>

Source: src/css/components/loading.less, line 7

Basic pure CSS loader, by default hidden. Use class show to display loader on a desired place. All the sizes are supported.

Examples

Default styling

.size-s

modifies the size

.size-l

modifies the size

.size-xxl

modifies the size

.size-ultra

modifies the size

.ld-white

white color

.ld-gray

gray color

.ld-gray-light

light gray color

.ld-red

red color

Markup

<div class="loading show [modifier class]"></div>

Source: src/css/components/loading.less, line 26

Use class loading full to place itself in the middle of element, with some predefined colors, sizes

Example

Markup

<div class="wrapper-el">
             <div class="loading full show"></div>
         </div>

Source: src/css/components/loading.less, line 80