Spinner

A simple animated activity indicator.

Basic Example

This is how a basic .spinner looks like and how you write the markup:

<!-- example -->
<div class="box box--1 w-10 h-10">
    <span class="spinner"></span>
</div>

Positioning: A .spinner must always be placed inside a positioned element (eg. position: relative;).

Modifiers

Dark

Add the modifier class .spinner--dark to create a spinner that looks better on dark backgrounds:

<!-- example -->
<div class="box box--1 w-10 h-10">
    <span class="spinner spinner--dark"></span>
    <img class="d-blk" src="https://source.unsplash.com/IzYV53M52PM/160x160" />
</div>

Source Files

components/spinner/