Progress

Communicate operation status with a linear bar or circular ring. Four variants (default/success/warning/error), three sizes, five rounding options, indeterminate animation, optional label with inside/outside positioning, and LTR/RTL support.

Installation

pnpm add @tessinaui/ui

Usage

import { Progress } from "@tessinaui/ui";

{/* Linear — determininate */}
<Progress value={65} />

{/* Linear — with label */}
<Progress value={65} showLabel labelPosition="outside" />

{/* Linear — inside label (lg only) */}
<Progress value={75} size="lg" showLabel labelPosition="inside" />

{/* Linear — indeterminate */}
<Progress indeterminate />

{/* Linear — success variant */}
<Progress value={100} variant="success" showLabel labelPosition="outside" />

{/* Circular */}
<Progress type="circular" value={65} />

{/* Circular — with inside label */}
<Progress type="circular" value={65} size="lg" showLabel labelPosition="inside" />

{/* Circular — indeterminate */}
<Progress type="circular" indeterminate />

{/* RTL */}
<Progress value={60} dir="rtl" showLabel labelPosition="outside" />

Playground

Preview

Showcase

Preview

API Reference

Props

Prop	Type	Default	Description
`type`	`"linear" \| "circular"`	`"linear"`	Bar or ring style
`value`	`number`	`0`	Current progress (0–100, clamped)
`variant`	`"default" \| "success" \| "warning" \| "error"`	`"default"`	Color intent of the fill
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Visual size — affects track height (linear) or SVG diameter (circular)
`rounded`	`"none" \| "sm" \| "md" \| "lg" \| "full"`	`"full"`	Corner rounding of track and fill (linear only)
`indeterminate`	`boolean`	`false`	Show animated loading state — `value` is ignored
`showLabel`	`boolean`	`false`	Render a percentage label
`labelPosition`	`"inside" \| "outside"`	`"outside"`	Where the label renders — see notes
`label`	`string`	`"${value}%"`	Custom label string; auto-generates `"${value}%"` when omitted
`dir`	`"ltr" \| "rtl"`	`"ltr"`	Text direction — RTL fills the bar from the right
`className`	`string`	—	Additional classes on the root element

Sizes

Size	Linear height	Circular diameter
`sm`	`6px` (h-1.5)	`32px`
`md`	`10px` (h-2.5)	`48px`
`lg`	`16px` (h-4)	`64px`
`xl`	`32px` (h-8)	`128px`

Variants

Variant	Fill color
`default`	`bg-primary`
`success`	`bg-success`
`warning`	`bg-warning`
`error`	`bg-error`

Notes

Inside label (linear): Only renders when size="lg" or size="xl" — the track must be tall enough to display text. Silently falls back to no label for sm/md sizes when labelPosition="inside".
Inside label (circular): Overlays the percentage centered within the ring at all sizes. Adjust font size scales with size prop automatically.
Indeterminate labels: Labels are suppressed when indeterminate=true (no value to show). Pass an explicit label string to show fixed text regardless.
RTL: For type="linear", dir="rtl" causes the fill to grow from the right edge. For type="circular", direction has no visual effect.
Accessibility: Root element carries role="progressbar", aria-valuenow, aria-valuemin={0}, aria-valuemax={100}, and aria-label. When indeterminate=true, aria-valuenow is omitted (undefined) per ARIA spec.
No headless dependency: Progress is implemented with pure HTML + SVG — no Base UI primitives needed.

Progress

On this page