Material Admin Extended Dark

## Preloaders

CSS and SVG based material design style preloaders.

You can check the live preview at `/preloaders.html`

#### Basic example

Preloaders are available in multiple color variants.

    <!-- Light -->
    <div class="preloader preloader--light">
        <svg viewBox="25 25 50 50">
            <circle cx="50" cy="50" r="20" />
        </svg>
    </div>

    <!-- Red -->
    <div class="preloader preloader--red">
        <svg viewBox="25 25 50 50">
            <circle cx="50" cy="50" r="20" />
        </svg>
    </div>

    <!-- Blue -->
    <div class="preloader preloader--blue">
        <svg viewBox="25 25 50 50">
            <circle cx="50" cy="50" r="20"/>
        </svg>
    </div>

    <!-- Green -->
    <div class="preloader preloader--green">
        <svg viewBox="25 25 50 50">
            <circle cx="50" cy="50" r="20" />
        </svg>
    </div>

    <!-- Yellow -->
    <div class="preloader preloader--yellow">
        <svg viewBox="25 25 50 50">
            <circle cx="50" cy="50" r="20" />
        </svg>
    </div>

    <!-- Blue Grey -->
    <div class="preloader preloader--bluegray">
        <svg viewBox="25 25 50 50">
            <circle cx="50" cy="50" r="20" />
        </svg>
    </div>

    <!-- Amber -->
    <div class="preloader preloader--amber">
        <svg viewBox="25 25 50 50">
            <circle cx="50" cy="50" r="20" />
        </svg>
    </div>

    <!-- Teal -->
    <div class="preloader preloader--teal">
        <svg viewBox="25 25 50 50">
            <circle cx="50" cy="50" r="20" />
        </svg>
    </div>

    <!-- Pink -->
    <div class="preloader preloader--pink">
        <svg viewBox="25 25 50 50">
            <circle cx="50" cy="50" r="20" />
        </svg>
    </div>

    <!-- Purple -->
    <div class="preloader preloader--purple">
        <svg viewBox="25 25 50 50">
            <circle cx="50" cy="50" r="20" />
        </svg>
    </div>

#### Sizing

Preloaders are also available in 4 custom sizes.

    <!-- Small -->
    <div class="preloader preloader--sm preloader--light">
        <svg viewBox="25 25 50 50">
            <circle cx="50" cy="50" r="20" />
        </svg>
    </div>

    <!-- Default -->
    <div class="preloader preloader--light">
        <svg viewBox="25 25 50 50">
            <circle cx="50" cy="50" r="20" />
        </svg>
    </div>

    <!-- Large -->
    <div class="preloader preloader--lg preloader--light">
        <svg viewBox="25 25 50 50">
            <circle cx="50" cy="50" r="20" />
        </svg>
    </div>

    <!-- Extar Large -->
    <div class="preloader preloader--xl preloader--light">
        <svg viewBox="25 25 50 50">
            <circle cx="50" cy="50" r="20" />
        </svg>
    </div>

Source files:

- LESS: `/less/inc/preloader.less`
- HTML: `/preloaders.html`