Loader
Loaders provide a visual cue that an action is being processed.
2 min read
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 |