Loader
A loading indicator is used to convey the state of action that is processing or waiting a result.
React
import { Loader } from '@hover/blueprint';
Label
A label is required to ensure the Loader is accessible.
<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.
<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..." />
Size
The size property is optional and defaults to small. Loader supports the same sizes as Icon.
<Loader size="small" label="Processing..." />
<Loader size="medium" label="Processing..." />
<Loader size="large" label="Processing..." />
<Loader size="huge" label="Processing..." />
Speed
The animation speed is controlled via the speed prop and defaults to 500.
<Loader speed={500} size="large" label="Processing..." />
<Loader speed={700} size="large" label="Processing..." />