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"
type
when processing time can be accurately represented.
Usage
- Add to the top or bottom of a Panel, Popover, Dialog, Card, Tile, or area with a clear edge to show processing time
Sample
<calcite-progress value="80"></calcite-progress>
Best practices
Progress type | Usage |
---|---|
"determinate" | Preferred type . Use when processing percentage can be relayed to the user. |
"indeterminate" | Use when a processing percentage cannot be relayed. |

API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
label | label | Accessible name for the component. | string | |
reversed | reversed | When true and for "indeterminate" progress bars, reverses the animation direction. | boolean | false |
text | text | Text that displays under the component's indicator. | string | |
type | type | Specifies the component type.
Use "indeterminate" if finding actual progress value is impossible. | "determinate" | "indeterminate" | "determinate" |
value | value | When type is "determinate" , specifies the component's value with a range of 0 to 100. | number | 0 |
Styles
Name | Description |
---|---|
--calcite-progress-background-color | Specifies the component's background color. |
--calcite-progress-fill-color | Specifies the component's fill color. |
--calcite-progress-text-color | Specifies the component's text color. |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |