Spinners

A spinner is an animated icon that indicates that content is loading.

Use when

There are two types of work indicators, determinate and indeterminate.

• Use the determinate work indicator (progress bar) when there's either a clear endpoint for the process or some other way to track progress.
• Use an indeterminate work indicator (spinner, loading bar) when there's no clear end point or when it can't be known when the process will be finished. A typical case is waiting for a server response.

Helper classes for spinners

The default spinner is grey. You can include a spinner in your interface by adding a <span> with a .spinner class. You can change the size by adding .spinner-sm for 32px x 32px or .spinner-xs for 16px x 16px.

<div class="d-flex gap-32">
    <div class="text-center">
        <div><h1 class="body-md">Small</h1></div>
        <span class="spinner spinner-xs">Loading</span>
        <div class="mt-8">
        </div>
    </div>

    <div class="text-center">
        <div><h1 class="body-md">Medium</h1></div>
        <span class="spinner spinner-sm">Loading</span>
        <div class="mt-8">
        </div>
    </div>

    <div class="text-center">
        <div><h1 class="body-md">Large</h1></div>
        <span class="spinner">Loading</span>
        <div class="mt-8">
        </div>
    </div>
</div>