Provide a loading state for a component or page using a customizable loading spinner.


The loader component is available in a light or dark color, which you can choose using the variant property.

Loader Variants


You're able to use the size modifier to control the size of your loader component, using one of the available sizes: sm, md, and lg.

By default, loaders are set to have a 64px width and height.

Loader Sizes

You can set the loader size to fit the container that it is in by using the auto size property. Make sure to use the same height and width to keep the correct aspect ratio.

Loader Auto Size


You're able to provide some additional text by using the default loader slot.

Loader Default Slot


Loader API <i-loader>
Property Description Type Accepted Default
count Sets the number of elements that make up the loading spinner. To be used together with the $loader-item-count Sass variable. Number 12
size Sets the size of the loader component. String sm, md, lg md
variant Sets the color variant of the loader component. String light, dark light