Overview

Circular loaders illustrate progress by moving an indicator along a circular track.

See the loaders page for more information.

Specifications

  • Dimensions do not exceed 48x48px
  • Progress indicator uses brand.secondary.v_100
  • Track width is 4px

Placement

  • When loading new content, center the loader
  • The loader can routinely appear and disappear when indicating a background task
  • Do not break the flow of information or content by placing between items (e.g. list items, content cards, table rows)

Props

Name Description Type Default Required
type
One of 'determinate' or 'indeterminate'. Determinate loaders represent a known completion percentage, while indeterminate loaders simply show that activity is currently happening.
string 'indeterminate'
progress
For determinate loaders, value between 0 and 100 representing percentage completion
number 0
delay
Whether there should be a delay before the loader displays. Useful if the action often takes less than a second or two.
boolean false
size
Overall size of the loader in pixels
number 32
stroke
Stroke width of the loader in pixels
number 4