Spinners

Spinners, or work indicators, are used to show that the system is working when this isn’t otherwise obvious. Typical examples are when the system is Loading, Waiting, Working, Processing, Saving, Printing etc. Spinners are then used to describe the current status of the application. Read more about spinners in the UX Guidelines.

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.

Basic design

The base spinner have a 48x48px dimention.

There are 3 types of spinners, with 3 version of color, for light or dark mode:

doughnut
snake
dotted

Light mode version

SVG spinners

Dark mode version

SVG spinners

Helper classes for spinners

You can include in your interface any of the below spinners. Include them by adding a <span> with a .spinner class and another class that represents the spinner that you need, example: .spinner-default-grey. Also you can add another class that will make the spinner smaller: .spinner-sm for 24px x 24px or .spinner-xs for 16px x 16px.


					<span class="spinner spinner-default-blue"></span>


					<span class="spinner spinner-default-green"></span>


					<span class="spinner spinner-default-grey"></span>


					<span class="spinner spinner-primary-blue"></span>


					<span class="spinner spinner-primary-green"></span>


					<span class="spinner spinner-primary-grey"></span>


					<span class="spinner spinner-secondary-blue"></span>


					<span class="spinner spinner-secondary-green"></span>


					<span class="spinner spinner-secondary-grey"></span>

Options

Smaller spinners

Add to your spinner img or object tags, the .spinner-sm class to it, for 24x24px.

SVG spinners

Extra-small spinners

Add to your spinner img or object tags, the .spinner-xs class to it, for 16x16px.

SVG spinners

				
// Basic Spinner import as SVG
<object type="image/svg+xml" data="[path_to_spinner_location]/spinner_doughnut_blue_light.svg"></object>
<object type="image/svg+xml" data="[path_to_spinner_location]/spinner_doughnut_blue_dark.svg"></object>

// Smaller Spinners
<object class="spinner-sm" type="image/svg+xml" data="[path_to_spinner_location]/spinner_dotted_grey_light.svg"></object>

// Extra-small Spinners
<object class="spinner-xs" type="image/svg+xml" data="[path_to_spinner_location]/spinner_snake_green_light.svg"></object>

// Helper classes
<span class="spinner spinner-default-blue"></span>
<span class="spinner spinner-default-green"></span>
<span class="spinner spinner-default-grey"></span>
<span class="spinner spinner-primary-blue"></span>
<span class="spinner spinner-primary-green"></span>
<span class="spinner spinner-primary-grey"></span>
<span class="spinner spinner-secondary-blue"></span>
<span class="spinner spinner-secondary-green"></span>
<span class="spinner spinner-secondary-grey"></span>