Loader

Accessibility

  • role="progressbar" is applied to the element.
  • aria-busy=true is applied to element which indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
  • By default aria-label="Loading" is applied to loader element. Can be changed using overrides.

Examples

Beat(default) Loader in different sizes

Size - 6

Size - 10

Size - 12

Size - 16

Size - 20

Size - 24

Size provided to the Beat Loader is applied to each ball of the loader.

Clip Loader in different sizes

Size - 6

Size - 10

Size - 12

Size - 16

Size - 20

Size - 24

Loader with delay

If loading ends during delay, loader won't appear.

Loading Content

Using Typography

Text Content

Non Typography Component

When Typography component is used in loadingContent, Text component will not rendered. For all the other cases, content will be rendered inside Text component.

Loader Overrides

Loading

Text will accept any TypographyProps.

Loader props

NameTypeDefaultDescription
className
string
Classes to apply on Loader Root.
delay
number
0(in ms) Loader will be visible after delay. Defaults is: 0. If delay is 0, loader will be visible as soon as the component mounts.
intent
'default'| 'success'| 'warning'| 'error'| 'ai'
Defines the intent of the Input.
loadingContent
react node
Content to display below loader. Content can be wrapped inside any Component. If Typography component is used, content won't be wrapped inside Text and Text overrides won't work.
overrides
custom
Lets you customize all aspects of the component.
size
number
16Size of the Loader(excluding loadingText). In case of BeatLoader size is applied to each balls.
variant
'beat'| 'clip'| 'spinner'
beatDefines variant of Loader.

Loader exports

You can import this module like so:

import {DEFAULT_DELAY} from 'spaceweb/loader'

It exports the following components or utility functions:

  • DEFAULT_DELAY
  • DEFAULT_SIZE
  • Loader
  • StyledRoot