Progress ring with ETAPro

Progress for a long generation: a ring with a tabular percent, the time so far and a range for the time left, such as about 20 to 40 s, instead of a precise number nobody can promise.

Markdown

On this page

ProA clip render: no progress for 2 s, then a percent and a time range that narrows. Pause, resume and cancel.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/progress-ring-eta

Usage

tsx

import { ProgressRingEta } from "@/components/ui/chatcn/pro/progress-ring-eta"

<ProgressRingEta
  jobKey={job.id}
  value={job.progress}     // 0 to 1, or leave it out
  status={job.status}      // "running" | "paused" | "done" | "error"
  label="Rendering clip"
/>

Without eta, the range is estimated from progress so far. It stays hidden until there is enough signal (4% and 1.5 s), starts wide, narrows as the job nears the end, re-estimates only when progress moves and counts down between updates, so it never twitches every second. When the provider sends an estimate, pass it as eta in ms: one number or a [min, max] pair.

Examples

States

ProProvider range, no progress yet, paused, done, failed, a long label and three sizes.

Props

Prop	Type	Notes
`value`	`number`	0 to 1. Leave it out and the ring turns instead of guessing
`status`	`"running" \| "paused" \| "done" \| "error"`	Default `running`
`label`	`ReactNode`	What is being made. Also the progress bar's name
`eta`	`number \| [min, max] \| { min, max }`	Time left in ms from the provider
`elapsedMs`	`number`	Elapsed time from the server. Otherwise the ring keeps its own clock
`jobKey`	`Key`	Restarts the clock and the estimate
`error`	`ReactNode`	What went wrong and how to fix it. Has a default
`size`	`"sm" \| "md" \| "lg"`	32, 44 or 64 px. Default `md`
`compact`	`boolean`	The ring alone
`actions`	`ReactNode`	Buttons after the text, such as Pause and Cancel

Accessibility

The ring is a progressbar with a value text such as 42%, about 20 to 40 seconds left. Without progress it has no value, which screen readers read as busy.
A polite live region says done or failed once. Progress ticks are never announced.
Done and failed pair the green or red ring with a check or alert icon, never color alone. In forced colors the arc uses the system highlight color.
The clock pauses with the job, so Paused at 64% stays true.

Motion

The arc eases to each new value over 300 ms. Without progress a 22% arc turns once every 1.4 s, slowed further under reduced motion like the kit's spinner.
Under reduced motion the arc jumps to each value.