Loader

Loaders provide a visual cue that an action is being processed.

Overview

Example

Code

Import the component from @faststore/ui


_10import { Loader } from '@faststore/ui'

To apply the styles of this component in your FastStore project, import the following into your stylesheet:


_10@import '@faststore/ui/src/components/atoms/Loader/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.


_10<Loader />

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-loader`
variant	`"light" \| "dark"`	Specifies the component color variant.	`dark`

Local token	Default value/Global token linked
`--fs-loader-gap`	`var(--fs-spacing-0)`

`--fs-loader-animation-function`	`var(--fs-transition-function)`
`--fs-loader-animation-timing`	`var(--fs-transition-timing)`

Local token	Default value/Global token linked
`--fs-loader-item-width`	`var(--fs-spacing-0)`
`--fs-loader-item-height`	`var(--fs-loader-item-width)`

`--fs-loader-item-border-radius`	`var(--fs-border-radius-circle)`

`--fs-loader-item-initial-opacity`	`.6`


_10<Loader />

Local token	Default value/Global token linked
`--fs-loader-dark-item-bkg-color`	`var(--fs-color-primary-bkg-active)`


_10<Loader variant="light" />

Local token	Default value/Global token linked
`--fs-loader-light-item-bkg-color`	`var(--fs-color-tertiary-bkg-light)`

For further customization, you can use the following data attributes:

data-fs-loader

data-fs-loader-variant="light" | "dark"