KQ-805 · EVAL/PROGRESS
Eval Progress
A progress bar built from one segment per case. As a case lands its segment fills from the left on glide — a green wash for a pass, a red one for a fail — then a pass ticks with a check drawn on flick and a fail stamps with a cross landing from 1.3× on glide, never a bounce. The pass rate in the header rolls its digits on snap beside a done-of-total count. It is a progressbar whose value is cases done and whose text carries passed and failed; the live region speaks each fail and the final rate once, never a passing case.
KQ-805 · EVAL/PROGRESS
Basinworks Scout
Dispatch suiteWaiting0 / 18%
Press run · 18 cases
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/eval-progress
Props
- results
- EvalCase[]
- default —
- The cases in order: id, name, and a status of "pending", "pass", or "fail"; a case lands when its status leaves pending.
- playing
- boolean
- default false
- The run is live: sets aria-busy on the bar and the Running word.
- label
- string
- default —
- Names the bar for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| results | EvalCase[] | — | The cases in order: id, name, and a status of "pending", "pass", or "fail"; a case lands when its status leaves pending. |
| playing | boolean | false | The run is live: sets aria-busy on the bar and the Running word. |
| label | string | — | Names the bar for assistive technology. |