Loader
Loaders provide a visual cue that an action is being processed.
The
Loader component provides visual feedback to users during processing or loading states, helping maintain engagement and communicate that the system is working. Typical use cases include:- Indicating content or data is being loaded (e.g., product listings, search results).
- Showing processing status during form submissions or checkout.
- Displaying loading state within buttons during async actions (e.g.,
Add to Cart).
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
Loader item tokens control the appearance of the individual animated dots that make up the loader, including their size, shape, and initial opacity.
| 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
The dark variant (default) uses a darker color scheme, making it suitable for use on light backgrounds and most standard interface contexts.
| Local token | Default value/Global token linked |
|---|---|
--fs-loader-dark-item-bkg-color | var(--fs-color-primary-bkg-active) |
Design tokens: Light
The light variant uses a lighter color scheme, ideal for displaying loaders on dark backgrounds or in high-contrast scenarios.
| 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 |