Loader

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

Use the loader component whenever you have an action that requires the user to wait for its completion. The loader component is very versatile and can be adapted to any container size.

<template>
    <ILoader />
</template>

Color Variants

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

<template>
    <ILoader color="primary" />

    <ILoader color="light" />

    <ILoader color="dark" />
</template>

Size 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.

<template>
    <ILoader size="sm" />

    <ILoader size="md" />

    <ILoader size="lg" />
</template>

If you set the size property to auto, the loader will fit the container that it is in. Make sure to use the same height and width to keep the correct aspect ratio.

<template>
    <div style="height: 100px; width: 100px">
        <ILoader size="auto" />
    </div>
</template>

Text Example

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

<template>
    <ILoader> 99% </ILoader>
</template>

Props

Slots

Design Tokens