Linear progress
Also known as: Progress bar, Loading bar
Resources
Properties
| Property | Values | Default |
|---|---|---|
Size Variant | 3Xs | 2Xs | 2Xs |
Has label Boolean | true | false | true |
Label Text | string | 15% |
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 the progress is indeterminate and you cannot measure completion, use loader instead.
Size
Dimensions of the linear 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.css
--scale-width-<size>
--scale-height-<size>
--scale-gap-<size>
--scale-radius-<size>
--scale-text-size-<size>
--scale-text-height-<size>