Loader

A loading indicator is used to convey the state of action that is processing or waiting a result.

Processing...

React

import { Loader } from '@hoverinc/design-system-react-web';

Label

A label is required to ensure the Loader is accessible.

live

<Loader label="I'm waiting on something" />

Variant

Spinner deprecation

We're moving away from the default spinner variant in favor of ellipsis in Button, etc. and brand for fullscreen loading states. The spinner variant will be removed after we migrate internal system components.

The default variant is spinner, but ellipsis is available for smaller inline usage and brand for larger fullscreen loading states.

live

<Center gap="800">
  <Center background="neutral.875" borderRadius="round" width="400" height="400">
    <Loader color="neutral.0" label="Processing..." variant="ellipsis" />
  </Center>
  <Center background="neutral.875" borderRadius="400" width="600" height="600">
    <Loader color="neutral.0" label="Processing..." size="huge" variant="brand" />
  </Center>
</Center>

Size

The size property is optional and defaults to small. Loader supports the same sizes as Icon.

live

<HStack>
  <Loader size="small" label="Processing..." />
  <Loader size="medium" label="Processing..." />
  <Loader size="large" label="Processing..." />
  <Loader size="huge" label="Processing..." />
</HStack>

Speed

The animation speed is controlled via the speed prop and defaults to 500.

live

<HStack>
  <Loader speed={500} size="large" label="Processing..." />
  <Loader speed={700} size="large" label="Processing..." />
</HStack>

List

LoadingOverlay

Design System

Settings

Loader

React

Label

Variant

Spinner deprecation

Size

Speed