Design System

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 '@hoverinc/design-system-react-web';

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.

Loading

Color

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

Loading

Speed

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

Loading

Size

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

Loading

Copyright ยฉ 2025 Hover Inc. All Rights Reserved.