Loader

Animated Loaders and spinners used for processing and loading states.

Top

Usage

In the past, loading animations have been built using animated GIFs, or through JavaScript timers, both of which are outdated. Take advantage of GPU rendering through CSS animations with these beautifully designed CSS loaders. Perfect for AJAX loading states.

Waves

There are 2 types of wave animations, a bar wave and a bubble wave. The bar wave is a set of solid vertical bars that fluctuate in size in a horizontal manner.

<div class="loader bar-wave">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

    <!-- Message is optional -->
    <div class="loader-message">
        Loading...
    </div>
</div>

The bubble wave is similar to a bar wave, with the only difference being the bars are circle shaped.

<div class="loader bubble-wave">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>

    <!-- Message is optional -->
    <div class="loader-message">
        Loading...
    </div>
</div>
Each span in the examples above represent an individual bar or bubble. By default, animations will only occur for spans up to 5. To increase or decrease this number, modify the $loader-wave-count Sass variable.

Spinners

There is currently only 1 type of spinner, a bubble spinner. A bubble spinner is a set of 8 bubbles that fluctuate in a clockwise manner.

<div class="loader bubble-spinner">
    <div class="loader-spinner">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

    <!-- Message is optional -->
    <div class="loader-message">
        Loading...
    </div>
</div>
All 8 spans are required for the bubble spinner.
Top

Variables

Variable Default Description
$loader-bar-height 2.5rem The height of a bar.
$loader-bar-width 0.65rem The width of a bar.
$loader-bubble-size 1.5rem The radius of a bubble.
$loader-class .loader CSS class name for the loader wrapper.
$loader-class-message .loader-message CSS class name for the loader message.
$loader-class-spinner .loader-spinner CSS class name for the loader spinner wrapper.
$loader-color #000 The color of the bars and bubbles.
$loader-type all The type of loader to include in the CSS output. Accepts all, bar-wave, bubble-wave, and bubble-spinner.
$loader-wave-count 5 The number of items in a wave to generate animations for.