Circular progress
Also known as: Spinner, Radial loader
Resources
Properties
| Property | Values | Default |
|---|---|---|
Size Variant | 2Xs | Xs | Sm | Md | Lg | Xl | 2Xl | 2Xs |
When to use
When progress is determinate, meaning the system can measure and display completion percentage.
When progress moves towards completion in a linear manner, such as file uploads, form completion or loading screens.
When indicating progress related to a user's account or profile.
When the progress is indeterminate and you cannot measure completion, use loader instead.
When users need more detailed progress information with labels or percentages, use linear progress instead.
Size
Dimensions of the circular progress are tied to the global scale tokens. This ensures that the components with similar size settings remain consistent across the interface. scale tokens also provides more granular control over dimensional settings.
--scale-width-<size>
--scale-height-<size>