Loader

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

Overview

Import the component from @faststore/ui

import { Loader } from '@faststore/ui'

Import Styles

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

<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`

<Loader />

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

<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"