Aspyn

Progress

Determinate progress and capacity bars.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens
import { Progress } from "@aspyn-io/kit";

Basic

<Progress value={62} aria-label="Upload progress" />

Capacity bars

Use indicatorClassName with chart tokens for capacity/load meters — the dispatch pattern.

<Progress value={75} indicatorClassName="bg-chart-1" aria-label="Route load 6 of 8" />
<Progress value={100} indicatorClassName="bg-chart-2" aria-label="Route load 8 of 8" />
<Progress value={38} indicatorClassName="bg-chart-3" aria-label="Route load 3 of 8" />

Notes

  • Radix Progress announces progress to assistive tech; always provide an accessible name.
  • See the Dispatch block for capacity bars in a full layout.