Overview
Circular loaders illustrate progress by moving an indicator along a circular track.
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
| — |