@asphalt-react/loader

Loader

Loaders provide a visual cue about tasks running in the background, like fetching data. Use Loaders when the progress of the task is non-deterministic. There are two types of loaders:

• Loader (Dot)
• Spinner

Loaders come in different sizes and intents.

Usage

import { Loader, Spinner } from "@asphalt-react/loader"

<Loader />
<Spinner />

Accessibility

• Loader and Spinner supports preferred reduce motion accessibility feature. Enabling the Reduce Motion setting slows down the animation.
• Loaders (both Dot and Spinner) have the ARIA "progressbar" role.

Sizes

• Loader supports 3 sizes - small (s), medium (m) (Default) and large (l).

Spinner

Usage in other components

Use Spinner in components like Textfield and Button to show a loading state. For consistent user-experience, ensure the size of the Spinner and the component are same.

• Text field size XS = Spinner size XS
• Text field size S = Spinner size S
• Button size XS = Spinner size XS

import { Textfield } from "@asphalt-react/textfield"
import { Spinner } from "@asphalt-react/loader"

<Textfield addonEnd={<Spinner >} />

Sizes

Spinner support 6 sizes:

• extra small (xs)
• small (s)
• medium (m) (Default)
• large (l)
• extra large (xl)
• double extra large (xxl)

Intents

Spinner support 3 intents:

• neutral (Default)
• brand
• inverse

Loader component

Props

size

Size of the Loader. Accepts "s", "m" and "l" for small, medium & large respectively

type	required	default
enum	false	"m"

Spinner component

Props

size

Size of the Spinner. Accepts "xs", "s", "m", "l", "xl", "xxl".

type	required	default
enum	false	"m"

neutral

Applies neutral intent.

type	required	default
bool	false	false

brand

Applies brand intent.

type	required	default
bool	false	false

inverse

Applies inverse intent.

type	required	default
bool	false	false