Components

Spinner

A circular loading indicator — a 2px ruled ring with an accent-colored top segment, rotating continuously. The one place the flat system allows a radius, because a spinner is a motion glyph, not a surface. Honors reduced-motion.

Sizes

Small (14px), default (20px), and large (32px).

sm · default · lg

<span class="ds-spinner ds-spinner--sm" role="status" aria-label="Loading"></span>
<span class="ds-spinner" role="status" aria-label="Loading"></span>
<span class="ds-spinner ds-spinner--lg" role="status" aria-label="Loading"></span>

Inline with text

The --inline modifier aligns the ring to the text baseline so it can sit beside a label or inside a button.

.ds-spinner--inline

Loading rates

Loading rates
<span class="ds-spinner ds-spinner--sm ds-spinner--inline" role="status" aria-label="Loading"></span>

<button class="ds-button ds-button--primary">
  <span class="ds-spinner ds-spinner--sm ds-spinner--inline" role="status" aria-label="Saving"></span>
  Saving…
</button>

React

The <Spinner> component exposes role="status" and an accessible label.

import { Spinner } from "@diametral/design-system/react";

<Spinner />
<Spinner size="lg" label="Loading rates" />
<Spinner size="sm" inline />