<h6 class="subtitle is-6 is-uppercase has-text-grey">Component</h6><h1 class="title is-serif is-1">Loader</h1>
<p class="subtitle is-5">
    <span class="has-text-weight-semibold">Loaders</span> are used when performing slow computations, notifying users that loading is underway.
</p>

<div class="subtitle is-6">
    For page loading, a <a href="#/skeleton">Skeleton</a> screen is probably a better option.
</div>

<hr class="is-visible is-large">

<div class="box is-well is-large is-marginless has-text-centered">
    <div class="level">
        <div class="level-item"><div class="loader"></div></div>
        <div class="level-item"><div class="loader is-large"></div></div>
        <div class="level-item"><div class="loader is-huge"></div></div>
    </div>
</div>
    
    <div class="loader">
    <div class="loader is-large">
    <div class="loader is-huge">
<br>

?> Use your own CSS or wrapping modifiers to change the position of the loader.

<hr class="is-large is-visible">

<h2 class="title is-4">Inverted</h2>

Add class `is-inverted` when displayed <strong>on a dark background</strong>.

<hr class="is-small">

<div class="box has-background-dark is-large has-text-centered">
    <div class="loader is-large is-inverted"></div>
</div>

<hr class="is-large is-visible">

<h2 class="title is-4">Undetermined</h2>

Add class `is-undetermined` when loading time is expected to take <strong>longer than usual</strong>.
<hr class="is-small">
<div class="box">
    <div class="loader is-large is-undetermined"></div>
</div>

<hr class="is-large is-visible">

<h2 class="title is-4">Colorful</h2>

Add class `is-colorful` to give the loader a unique Biings look.

<hr class="is-small">

<div class="box">
    <div class="loader is-large is-colorful"></div>
</div>
