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).

Props

size

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

| type | required | default | | ---- | -------- | ------- | | enum | false | "m" |

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

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 |