Spinner

Work in progress whose end is unknown, drawn in the color of the text around it and named for screen readers when it stands alone.

Feedbackloadingbusystatus

Workbench

Rendering Spinner…

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

npx mlola-ui add spinner

Usage

TSX

import { Spinner } from "@/components/ui/spinner";

export default function Example() {
  return (
    <p className="ml-cluster">
      <Spinner label="Loading results" />
      Searching 12,480 records
    </p>
  );
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

HTML

<html data-theme="graphite" data-mode="light">

HTML

The markup the example above renders, at rest. The interaction lives in the React component; from another framework, set the attributes below as the state changes.

HTML

<p class="ml-cluster"><span class="ml-spinner" role="status" data-size="md"><span class="ml-visually-hidden">Loading results</span></span>Searching 12,480 records</p>

Options

Prop	Values	Default
`size`	`smmdlg`	`md`

Every prop with a fixed set of values, read from the exported TypeScript types. Open the Code tab above for the rest of the API.

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Class	Attributes
`ml-spinner`	`data-size="lg \| sm"`

Accessibility and theming

Semantic elements, accessible names and state relationships are part of the contract.
Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
Reduced motion and forced colors keep meaning and operation.

Open the standalone preview