Loaders are used to visually communicate processing.
Overview
Loaders show that something is loading, computing, or processing with a spinning visual.
Loader type's can be set as "determinate" or "indeterminate". As a good UX practice, "determinate" should be used whenever it is possible to relay the loading percentage.
Sample
Best practices
Try not to overuse Loaders. Some interface elements can benefit from skeleton states, or by utilizing the Progress component.
Accessibility
Loader must have an accompanying label property to provide context to assistive technologies. Add a concise description so users are able to interpret why the Loader is present.
API reference
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| inline | inline | When true, the component displays smaller. | boolean | false |
| label | label | Accessible name for the component. | string | |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
| text | text | When not inline, displays text under the component's indicator. | string | "" |
| type | type | Specifies the component type.
Use "indeterminate" if finding actual progress value is impossible. Otherwise, use "determinate" to have the value indicate the progress or "determinate-value" to have the value label displayed along the progress. | "determinate" | "determinate-value" | "indeterminate" | "indeterminate" |
| value | value | The component's value. Valid only for "determinate" indicators. Percent complete of 100. | number | 0 |
Styles
| Name | Description |
|---|---|
| --calcite-loader-font-size | When type is not "indeterminate" or inline, specifies the font size of the loading percentage. |
| --calcite-loader-size | When inline is not set, specifies the component's width and height. |
| --calcite-loader-size-inline | --calcite-loader-size. Specifies the width and height of the component when set to inline. |
| --calcite-loader-spacing | Specifies the the component's padding. |
| --calcite-loader-progress-color-inline | When inline, specifies the component's progress ring color. |
| --calcite-loader-text-spacing | When not inline, specifies the component's text margin. |
| --calcite-loader-text-weight | When not inline and text is provided, specifies the component's text font weight. |
| --calcite-loader-text-color | When not inline and text is provided, specifies the component's text color. |
| --calcite-loader-progress-color | When not inline, specifies the component's progress ring color. |
| --calcite-loader-track-color | Specifies the component's track color. |
Methods
| Name | Description | Signature |
|---|---|---|
| componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |