Skip to content

Thinking

CSS

A bar waveform with a rotating step label, for long-running work.

Working · 1/4
Reading 14 sources

Install

$ npx shadcn@latest add https://spotcheckui.com/r/thinking.json

No motion engine needed.

Usage

import { Thinking } from "@/components/spotcheck/thinking"

<Thinking steps={["Reading 14 sources", "Comparing policies", "Drafting answer"]} />

Props

  • steps * Requiredstring[]Default —The labels to rotate through.
  • intervalnumberDefault 1600Time on each label, in milliseconds.
  • classNamestringDefault —

Keyboard

Nothing to operate: this component displays information.

Reduced motion

The bars stand still, and the label stays on the first step.