Blueprint

GuidesFoundationComponentsReleases
⌘K

LoadingState

A loading overlay that blocks user interaction on a specific element while displaying a spinner.

Design guidance

When and how to use this

Use LoadingState to indicate that an action or request is in progress, and the user cannot interact with the container until it is complete. Some examples include:

  • Loading an image or multimedia content
  • Preventing a user from editing a form that is being submitted

When to consider something else

If the action is triggered with a Button, setting isLoading on the button may be sufficient. To implement a more custom loading state with a spinner, use a [Loader] directly. If you need to block the entire page while loading, use LoadingOverlay.

React


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

Render the LoadingState component itself unconditionally using the isLoading prop to control its open state. Provide an accessible label to describe the pending action.

Note

Make sure to set position on the parent element as LoadingState is positioned absolutely.

live

() => {
const [isLoading, { on, off }] = useBoolean();
useEffect(() => {
if (!isLoading) return undefined;
const id = setTimeout(off, 2000);
return () => clearTimeout(id);
}, [isLoading, off]);
return (
<Form
backgroundSize="cover"
bg="url('/images/kitten--300-200.jpg')"
onSubmit={event => {
event.preventDefault();
on();
}}
p="300"
position="relative"
rounded="300"
shadow="distance100"
spacing="300"
maxWidth="800"
>
<TextInput iconBefore={iMail} placeholder="Email" />
<Button iconBefore={iSend} shape="box" size="large" type="submit">
Submit
</Button>
<LoadingState isLoading={isLoading} size="large" />
</Form>
);
};

Color

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

live

<Center
rounded="300"
overflow="hidden"
position="relative"
display="inline-flex"
>
<Image src="/images/kitten--300-300.jpg" width="500" />
<LoadingState color="neutral.0" isLoading />
</Center>

Speed

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

live

<Center
rounded="300"
overflow="hidden"
position="relative"
display="inline-flex"
>
<Image src="/images/kitten--300-200.jpg" width="600" />
<LoadingState isLoading speed={700} />
</Center>

Size

Size defaults to medium and supports the same sizes as Icon.

live

<Center
rounded="300"
overflow="hidden"
position="relative"
display="inline-flex"
>
<Image src="/images/kitten--2160-1080.jpg" maxWidth="800" width="100%" />
<LoadingState
color="burlywood"
isLoading
size={{ base: 'large', mobile: 'huge' }}
/>
</Center>