Home

Progress ring

How far toward a goal: a ring whose track is a lighter blue, filled in blue from the top, the share in the middle.

ui.progress-ringcomponents/ui/progress-ring.tsx

Use case

For the AI

Use it for one goal with a target: the month's sales against the objective, a project's steps done, seats filled for an event. Say what is done of the target in words beside it (128,5 k$ sur 160 k$). It glides to a new value and fills from empty the first time (chart-card.goal).

Use it when

  • Sales against the month's objective
  • A count of steps done out of all
  • One goal on a dashboard

Use something else when

  • An amount against a limit in a list or a form: Meter
  • A task moving toward done (an upload): Progress
  • Several goals compared: Bar list

Examples

80 %

$128.5K of $160K

Code

Import

import { ProgressRing } from "@/components/ui/progress-ring"

Usage

<ProgressRing value={128460} max={160000} aria-label="Objectif du mois" />
<p className="text-[13px] text-ink-4">128,5 k$ sur 160 k$</p>

Rules

  • Always the done and the target in words beside it, in the unit.
  • One ring per card; several goals are a list.
  • It moves only when the value changes.