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
![spinner doughnut blue light](../../../dist/img/spinners/spinner_doughnut_blue_light.gif)
![spinner doughnut grey light](../../../dist/img/spinners/spinner_doughnut_grey_light.gif)
![spinner doughnut green light](../../../dist/img/spinners/spinner_doughnut_green_light.gif)
![spinner dotted blue light](../../../dist/img/spinners/spinner_dotted_blue_light.gif)
![spinner dotted grey light](../../../dist/img/spinners/spinner_dotted_grey_light.gif)
![spinner dotted green light](../../../dist/img/spinners/spinner_dotted_green_light.gif)
![spinner snake blue light](../../../dist/img/spinners/spinner_snake_blue_light.gif)
![spinner snake grey light](../../../dist/img/spinners/spinner_snake_grey_light.gif)
![spinner snake green light](../../../dist/img/spinners/spinner_snake_green_light.gif)
Dark mode version
SVG spinners
GIF spinners
![spinner doughnut blue dark](../../../dist/img/spinners/spinner_doughnut_blue_dark.gif)
![spinner doughnut grey dark](../../../dist/img/spinners/spinner_doughnut_grey_dark.gif)
![spinner doughnut green dark](../../../dist/img/spinners/spinner_doughnut_green_dark.gif)
![spinner dotted blue dark](../../../dist/img/spinners/spinner_dotted_blue_dark.gif)
![spinner dotted grey dark](../../../dist/img/spinners/spinner_dotted_grey_dark.gif)
![spinner dotted green dark](../../../dist/img/spinners/spinner_dotted_green_dark.gif)
![spinner snake blue dark](../../../dist/img/spinners/spinner_snake_blue_dark.gif)
![spinner snake grey dark](../../../dist/img/spinners/spinner_snake_grey_dark.gif)
![spinner snake green dark](../../../dist/img/spinners/spinner_snake_green_dark.gif)
Options
Smaller Spinners
Add to your spinner img
or object
tags, the .spinner-sm
class to it, for 24x24px.
SVG spinners
GIF spinners
![spinner doughnut blue light](../../../dist/img/spinners/spinner_doughnut_blue_light.gif)
![spinner dotted blue light](../../../dist/img/spinners/spinner_dotted_blue_light.gif)
![spinner snake blue light](../../../dist/img/spinners/spinner_snake_blue_light.gif)
Extra-small Spinners
Add to your spinner img
or object
tags, the .spinner-xs
class to it, for 16x16px.
SVG spinners
GIF spinners
![spinner doughnut blue light](../../../dist/img/spinners/spinner_doughnut_blue_light.gif)
![spinner dotted blue light](../../../dist/img/spinners/spinner_dotted_blue_light.gif)
![spinner snake blue light](../../../dist/img/spinners/spinner_snake_blue_light.gif)
// 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"/>