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) 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
GIF spinners
Dark mode version
SVG spinners
GIF 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
GIF spinners
Extra-small spinners
Add to your spinner img or object tags, the .spinner-xs class to it, for 16x16px.
SVG spinners
GIF 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>
// Basic Spinner import as gif
<img alt="spinner" src="[path_to_spinner_location]/spinner_doughnut_blue_light.gif"/>
<img alt="spinner" src="[path_to_spinner_location]/spinner_doughnut_blue_dark.gif"/>
// Smaller Spinners
<object class="spinner-sm" type="image/svg+xml" data="[path_to_spinner_location]/spinner_dotted_grey_light.svg"></object>
<img class="spinner-sm" alt="spinner" src="[path_to_spinner_location]/spinner_dotted_grey_light.gif"/>
// Extra-small Spinners
<object class="spinner-xs" type="image/svg+xml" data="[path_to_spinner_location]/spinner_snake_green_light.svg"></object>
<img class="spinner-xs" alt="spinner" src="[path_to_spinner_location]/spinner_snake_green_light.gif"/>
// 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>