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. | true false | |
inline | inline | When true, displays smaller and appears to the left of the text. | true false | |
label | label | Accessible name for the loader. | undefined | |
noPadding | no-padding | Disables spacing around the loader. | true false | |
scale | scale | Specify the scale of the loader. | l m (default) s | |
text | text | Text that displays under the loading indicator. | "" (default) | |
type | type | Use indeterminate if finding actual progress value is impossible. | determinate indeterminate | |
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 |