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.
Color Variants
The loader component is available in a light
or dark
color, which you can choose using the color
property.
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
.
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.
Text Example
You’re able to provide some additional text by using the default
loader slot.
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