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

Component API

Here you can find a list of the various customization options you can use for the loader component as props, as well as available slots.

Loader API

Sass Variables

Here you can find a list of the Sass variables you can use for the loader components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.