Loader

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

Basic Example

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.

<i-loader />

Color Variants

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

<i-loader color="primary" />

<i-loader color="light" />

<i-loader color="dark" />

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.

<i-loader size="sm" />

<i-loader size="md" />

<i-loader size="lg" />

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.

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

Text Example

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

<i-loader>
    99%
</i-loader>

Configuration

Props

Use props to modify the component’s design and behavior.

  • Property
    color
    Type'primary' | 'light' | 'dark'
    Default'light'
    Description The color variant of the loader
  • Property
    size
    Type'sm' | 'md' | 'lg' | 'auto'
    Default'md'
    Description The size variant of the loader

Slots

Use slots to insert custom content into well-defined component locations.

  • Property
    default
    Description Slot for default loader content

CSS Variables

Read more about configuring Inkline’s Design System variables to update the look and feel of the component.

  • Property
    ----animation-duration
    Value1.2s
    Description The animation duration of the loader component
  • Property
    ----size
    Value64px
    Description The size of the loader component
  • Property
    ----background
    Valuecolor('primary')
    Description The background of the loader component