Loader
Calcite Loaders are used to visually communicate processing.
Overview
Loaders show that something is loading, computing, or processing with a spinning visual. Calcite has Loaders for indeterminate (unknown) load times, and for determinate load times. As a good UX practice, the determinate prop should be used whenever it is possible to relay the percentage of something loading.
Try not to overuse Loaders. Some interface elements can benefit from skeleton states or by utilizing the Progress component.
Sample
API reference
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| active | active | When true, the loader is active. | truefalse | |
| inline | inline | When true, displays smaller and appears to the left of the text. | truefalse | |
| label | label | Accessible name for the loader. | undefined | |
| noPadding | no-padding | Disables spacing around the loader. | truefalse | |
| scale | scale | Specify the scale of the loader. | lm (default)s | |
| text | text | Text that displays under the loading indicator. | "" (default) | |
| type | type | Use indeterminate if finding actual progress value is impossible. | determinateindeterminate | |
| value | value | Valid only for determinate indicators. Percent complete of 100. | 0 (default) |
Styles
| Name | Description | CSS Variable |
|---|---|---|
| --calcite-loader-font-size | When type is determinate, the font-size of the loader percentage. | --calcite-loader-font-size |
| --calcite-loader-size | The width and height of a non-inline loader. | --calcite-loader-size |
| --calcite-loader-size-inline | The width and height of an inline loader. | --calcite-loader-size-inline |