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   spinner doughnut grey light   spinner doughnut green light   spinner dotted blue light   spinner dotted grey light   spinner dotted green light   spinner snake blue light   spinner snake grey light   spinner snake green light

Dark mode version

SVG spinners

               

GIF spinners

spinner doughnut blue dark   spinner doughnut grey dark   spinner doughnut green dark   spinner dotted blue dark   spinner dotted grey dark   spinner dotted green dark   spinner snake blue dark   spinner snake grey dark   spinner snake green dark

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"/>