Blueprint

GuidesFoundationComponentsReleases
⌘K

Loader

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

I'm waiting on something

React


import { Loader } from '@hover/blueprint';

Label

A label is required to ensure the Loader is accessible.

live

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

Color

Any system can be applied to a Loader, though in most cases the primary or neutral palette should be preferred.

live

<HStack>
<Loader label="Processing..." />
<Loader color="neutral.600" label="Processing..." />
<Loader color="danger.500" label="Processing..." />
<Loader color="warning.500" label="Processing..." />
<Loader color="success.500" label="Processing..." />
</HStack>

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>