Loading Indicators

Spinner

A versatile, text-less spinner in dark (default) and light variants.

Spinning
Spinning
<div class="Spinner">Spinning</div>
<div class="Spinner Spinner--light">Spinning</div>

Use the type scale helpers to size the spinner:

Spinning
Spinning
<div class="Spinner text-f7">Spinning</div>
<div class="Spinner text-f2">Spinning</div>

Loading Dots

Used to append a series of loading dots after arbitrary text element.

Loading

Loading

<p class="LoadingDots">Loading</p>