Spinner

Provides an animated loading indicator for when content is being processed or fetched. A spinner should be used when loading takes fewer than ten seconds and the content structure is unknown. Authors must not use a spinner for indeterminate loading over ten seconds; use a progress bar instead. Authors should avoid omitting a text label, as screen readers rely on role="status" to announce the ARIA live region. The element is not keyboard-focusable.

import '@rhds/elements/rh-spinner/rh-spinner.js';

<rh-spinner></rh-spinner>

import { Spinner } from "@rhds/elements/react/rh-spinner/rh-spinner.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Spinner />
);

• When loading a section is expected to take fewer than ten seconds
• When the structure or amount of content that's loading is unknown