Progress
Calcite Progress is a thin and linear visual designed to show processing time for a task or workflow.
Overview
Designed to be used on a top or bottom edge of an area, Progress can be a helpful UX device to show the user something is being processed or loaded. Progress has a smaller height than Loader and is less obtrusive, which can be handy in tight spaces. Prefer the determinate prop when processing time can be accurately presented.
Sample
Best practices
Progress type | Usage |
---|---|
Indeterminate | For general interface loads when percentage cannot be relayed. |
Determinate | When processing percentage can be relayed to the user. |
- Top/bottom of a panel, popover, modal, card, tile, or area with a clear edge to show processing time

API reference
Properties
Property | Attribute | Description | Type | Values |
---|---|---|---|---|
label | label | Label for the progress indicator | undefined | |
reversed | reversed | For indeterminate progress bars, reverse the animation direction | true false | |
text | text | Text to display for the progress indicator | undefined | |
type | type | Use indeterminate if finding actual progress value is impossible | determinate (default) indeterminate | |
value | value | Fraction completed, in the range of 0 - 1.0 | 0 (default) |