Progress

Playground

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" />

Examples

Default

A basic linear progress bar showing a determinate value.

Types

Linear bar or circular ring via the type prop.

Variants

Four color intents — default, success, warning, and error.

Sizes

Four sizes — sm, md, lg, and xl.

With Label

Show a percentage label positioned outside the bar or inside it.

Indeterminate

Animated loading state when the value is unknown, for both types.

Loading

Skeleton placeholders shown before a value is known.

API Reference

Props

Sizes

Variants

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.