Loader component

Example

html

<i class="loader"></i>

Example

njk

{% for type in ['', 'hollow', 'clear'] %}
    {% for color in ['primary', 'secondary', 'success', 'alert', 'warning'] %}
        <button type="button" class="{{ type }} button {{ color }} loader">Button</button>
    {% endfor %}
    <br />
    {% for color in ['primary', 'secondary', 'success', 'alert', 'warning'] %}
        <button type="button" class="{{ type }} button {{ color }} loader" disabled>Button</button>
    {% endfor %}
    <br /><br />
{% endfor %}

html compiled

<button type="button" class=" button primary loader">Button</button>
<button type="button" class=" button secondary loader">Button</button>
<button type="button" class=" button success loader">Button</button>
<button type="button" class=" button alert loader">Button</button>
<button type="button" class=" button warning loader">Button</button>
<br />
<button type="button" class=" button primary loader" disabled>Button</button>
<button type="button" class=" button secondary loader" disabled>Button</button>
<button type="button" class=" button success loader" disabled>Button</button>
<button type="button" class=" button alert loader" disabled>Button</button>
<button type="button" class=" button warning loader" disabled>Button</button>
<br />
<br />
<button type="button" class="hollow button primary loader">Button</button>
<button type="button" class="hollow button secondary loader">Button</button>
<button type="button" class="hollow button success loader">Button</button>
<button type="button" class="hollow button alert loader">Button</button>
<button type="button" class="hollow button warning loader">Button</button>
<br />
<button type="button" class="hollow button primary loader" disabled>Button</button>
<button type="button" class="hollow button secondary loader" disabled>Button</button>
<button type="button" class="hollow button success loader" disabled>Button</button>
<button type="button" class="hollow button alert loader" disabled>Button</button>
<button type="button" class="hollow button warning loader" disabled>Button</button>
<br />
<br />
<button type="button" class="clear button primary loader">Button</button>
<button type="button" class="clear button secondary loader">Button</button>
<button type="button" class="clear button success loader">Button</button>
<button type="button" class="clear button alert loader">Button</button>
<button type="button" class="clear button warning loader">Button</button>
<br />
<button type="button" class="clear button primary loader" disabled>Button</button>
<button type="button" class="clear button secondary loader" disabled>Button</button>
<button type="button" class="clear button success loader" disabled>Button</button>
<button type="button" class="clear button alert loader" disabled>Button</button>
<button type="button" class="clear button warning loader" disabled>Button</button>
<br />
<br />

Variables

$loader-color (Color)

scss

$loader-color: $dark-gray !default;

Color of loader.

Used By

@mixin loader()

$mask-bg-color (Color)

scss

$mask-bg-color: rgba(0, 0, 0, .05) !default;

Mask default background-color.

$mask-light-bg-color (Color)

scss

$mask-light-bg-color: rgba(255, 255, 255, .25) !default;

Mask light background-color.

$loader-radius (Number)

scss

$loader-radius: 1000px !default;

Radius of loader.

Used By

@mixin loader()

Mixins

@mixin loader()

Create loader

Requires

$loader-radius (Number)

$loader-color (Color)

.mask

scss

.mask {
  &::before {
    cursor: progress;
    content: "";
    display: block;
    position: absolute;
    z-index: map_get($z-index, reveal-zindex);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: $mask-bg-color;
  }

  &--light::before {
    background-color: $mask-light-bg-color;
  }
}

Add class mask to an element to make it not clickable and lightly blurry. Attention: The element has to be positioned! Use mask mask–light for a brighter mask