Loader
Loaders provide a visual cue that an action is being processed.
Example
Code
Usage
Import the component
_10import { Loader } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/atoms/Loader/styles.scss";
For details, see Importing FastStore UI component styles.
Examples
Variants
Dark (Default)
Example
Code
Light
Example
Code
Design tokens
| 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) |
Design tokens: Loader item
| 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 |
Design tokens: Dark
| Local token | Default value/Global token linked |
|---|---|
--fs-loader-dark-item-bkg-color | var(--fs-color-primary-bkg-active) |
Design tokens: Light
| Local token | Default value/Global token linked |
|---|---|
--fs-loader-light-item-bkg-color | var(--fs-color-tertiary-bkg-light) |
Data attributes
You can target and override
Loader styles using the following data attributes:data-fs-loaderdata-fs-loader-variant="light" | "dark"Props
| 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 |