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
Edit sample on Codepen
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
calcite-progress
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| label | label | Label for the progress indicator | undefined | |
| reversed | reversed | For indeterminate progress bars, reverse the animation direction | truefalse | |
| 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) |