Loader

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

Variants

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

<i-loader variant="light" />

<i-loader variant="dark" />

Sizes

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.

<i-loader size="sm" variant="dark" />

<i-loader size="md" variant="dark" />

<i-loader size="lg" variant="dark" />

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.

<div style="height: 100px; width: 100px">
    <i-loader size="auto" variant="dark" />
</div>

Slots

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

<i-loader variant="dark">100%</i-loader>

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.

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.

(
    light: $loader-variant-light,
    dark: $loader-variant-dark
)

@function loader-variant($variant) {
    $loader-variant-background: $variant;

    $variant-map: (
        background: $loader-variant-background,
    );

    @return $variant-map;
}