Primitives

Progress

How far along something is: a bar, a bar in steps, or a ring. A real progressbar, with its value in words for screen readers. It fills once it is on screen: the bar as a trail of light with a glowing head, the steps one after another, the ring with a soft glow, and the xl ring holds the value in its center. With reduced motion it is simply full. The fill slides on transform. It is the brand color by default; a status is something you state with tone, such as over budget, since a low value is not an error on its own. Indeterminate, it runs the skeleton's band, and stands still as a faint fill without motion.

view .md

Preview

budgets · september12 days left

groceries

dining out

learning

emergency fund$6,200 of $10,000

months saved

syncing accounts

Installation

terminal

bash

npx @entrepta/cli@latest add progress

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

progress.tsx

tsx

import { Progress } from "@/components/entrepta/progress"

<Progress label="groceries" value={spent} max={budget} showValue />
<Progress label="months saved" value={9} max={12} segments={12} showValue />
<Progress variant="ring" size="xl" aria-label="emergency fund" value={62} showValue />
<Progress aria-label="syncing" indeterminate />

Props

Prop	Type	Default	Description
value, max	number	0, 100	Clamped into range
variant	"bar" \| "ring"	"bar"	A bar or a ring
segments	number	-	Split the bar into steps
label	ReactNode	-	Shown above, and the bar's name
showValue	boolean \| ReactNode	false	The value beside the label
valueText	string	"75%" or "9 of 12"	What screen readers hear
indeterminate	boolean	false	No known end
size	"sm" \| "md" \| "lg" \| "xl"	"md"	4 to 12px bar; 16, 24, 40 or 72px ring, the value centered in xl
tone	"brand" \| "success" \| "warning" \| "error"	"brand"	A status you state, never set by the value