Spinner

Spinner is a pixel loading ring: a solid cell steps clockwise around a 3x3 square, trailed by a fading dither. It's a status, so screen readers hear its label, and it holds still under reduced motion. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

import "@/components/dithercharts/controls.css"
import { Spinner } from "@/components/dithercharts/spinner"

<Spinner />
<Spinner size="sm" label="Loading chart" />
<Button disabled>
  <Spinner size="sm" label="Saving" />
  Saving
</Button>

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add spinner

Props

It renders a native element, so every other attribute that element takes passes through.