LoadingState

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

Figma

React

Bootstrap

Native

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>

Blueprint

Settings

LoadingState

Design guidance

When and how to use this

When to consider something else

React

Note

Color

Speed

Size