Thumbprint logo

Loader Dots

Loading indicator with three animated dots

Loader Sizes

Default

<ul class="tp-loader">
    <li></li>
    <li></li>
    <li></li>
</ul>

Small

<ul class="tp-loader tp-loader--small">
    <li></li>
    <li></li>
    <li></li>
</ul>

Loader colors

The loader can be used on dark backgrounds or in gray.

Inverse

<ul class="tp-loader tp-loader--inverse">
    <li></li>
    <li></li>
    <li></li>
</ul>

Muted

<ul class="tp-loader tp-loader--muted">
    <li></li>
    <li></li>
    <li></li>
</ul>