Loader
Loaders provide a visual cue that an action is being processed.
Overview
Import
Import the component from @faststore/ui
import { Loader } from '@faststore/ui'Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
@import '@faststore/ui/src/components/atoms/Loader/styles.scsss';Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
<Loader />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 |
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) |
Nested Elements
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 |
Variants
Dark (Default)
<Loader />| Local token | Default value/Global token linked |
|---|---|
--fs-loader-dark-item-bkg-color | var(--fs-color-primary-bkg-active) |
Light
<Loader variant="light" />| Local token | Default value/Global token linked |
|---|---|
--fs-loader-light-item-bkg-color | var(--fs-color-tertiary-bkg-light) |
Customization
For further customization, you can use the following data attributes:
data-fs-loader
data-fs-loader-variant="light" | "dark"
Related components
Button
Buttons indicate actions that users can take.
See more