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

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

API reference

calcite-loader
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
activeactive

When true, the loader is active.

booleanA boolean property should be present, or not
truefalse
inlineinline

When true, displays smaller and appears to the left of the text.

booleanA boolean property should be present, or not
truefalse
labellabel

Accessible name for the loader.

required
stringA custom string
undefined
noPaddingno-padding

Disables spacing around the loader.

booleanA boolean property should be present, or not
truefalse
scalescale

Specify the scale of the loader.

typedChoose from a set of typed values
lm (default)s
texttext

Text that displays under the loading indicator.

optional
stringA custom string
"" (default)
typetype

Use indeterminate if finding actual progress value is impossible.

typedChoose from a set of typed values
determinateindeterminate
valuevalue

Valid only for determinate indicators. Percent complete of 100.

numberA number
0 (default)

Styles

NameDescriptionCSS 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

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.