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
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 present and type is "indeterminate", 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> |