Documentation
Feedback
Guides
Storefront Development

Storefront Development
Loader

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

Overview

Example
Code

Import

Import the component from @faststore/ui

_10
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:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage


_10
<Loader />


Props

NameTypeDescriptionDefault
testIdstringID 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 tokenDefault value/Global token linked
--fs-loader-gapvar(--fs-spacing-0)
--fs-loader-animation-functionvar(--fs-transition-function)
--fs-loader-animation-timingvar(--fs-transition-timing)

Nested Elements

Loader Item

Local tokenDefault value/Global token linked
--fs-loader-item-widthvar(--fs-spacing-0)
--fs-loader-item-heightvar(--fs-loader-item-width)
--fs-loader-item-border-radiusvar(--fs-border-radius-circle)
--fs-loader-item-initial-opacity.6

Variants

Dark (Default)


_10
<Loader />

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

Light


_10
<Loader variant="light" />

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

  • Button

    Buttons indicate actions that users can take.

    See more
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page