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" />
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>
You're able to provide some additional text by using the default
loader slot.
<i-loader variant="dark">100%</i-loader>
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.
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
default
Slot for loader default content.
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.
$loader-size-base64px
$loader-size
size-map($loader-size-base, $sizes, $size-multipliers)
$loader-animation-duration
1.2s
$loader-item-count
12
$loader-item-size
8%
$loader-variants
('monochrome-white')