Data Display · astro-ui · Progress

Progress

Determinate/indeterminate progress bar and circle.

Progress shows task completion as a bar or circle. Omit value for indeterminate. stripes overlays diagonal stripes on the bar fill (optionally animated), stripedTrack hatches the empty remainder, segmented renders discrete blocks, and squared separates fill and track with a gap. The circle uses an SVG ring with stroke-dashoffset math.

← All components

Features

Bar and circle variants
Determinate (value) or indeterminate
6 sizes, 8 colors
stripes: static or animated diagonal stripes on the bar fill
stripedTrack / segmented / squared bar styles
label + showValue text
RTL: fill and label mirror via logical properties

Usage

---
import { Progress } from "astro-ui";
---

<Progress value={64} label="Uploading" showValue />
<Progress variant="circle" value={80} showValue />

Demos

Bar

25%

64%

<Progress value={64} label="Uploading" showValue />
<Progress /> <!-- indeterminate -->

Circle

<Progress variant="circle" value={60} showValue />
<Progress variant="circle" value={80} size="lg" showValue />

Stripes

<Progress value={82} stripes />
<Progress value={82} stripes="static" color="success" />

Striped track

<Progress value={38} stripedTrack />
<Progress value={72} stripedTrack color="success" />

Segmented

<Progress value={60} segmented />
<Progress value={45} segmented={8} color="success" />

Squared

<Progress value={40} squared />
<Progress value={90} squared color="success" />

API

Props

Prop	Type	Default	Description
`value`	`number`	`—`	0–100; omit for indeterminate.
`variant`	`"bar" \| "circle"`	`"bar"`	Shape.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`"md"`	Scale.
`color`	`"primary" \| "secondary" \| "success" \| "warning" \| "info" \| "muted" \| "destructive"`	`"primary"`	Fill color.
`label`	`string`	`—`	Text label.
`showValue`	`boolean`	`false`	Show the percentage.
`stripes`	`boolean \| "static"`	`false`	Diagonal stripes on the bar fill; true animates them.
`stripedTrack`	`boolean`	`false`	Hatch the empty remainder inside an outlined track.
`segmented`	`boolean \| number`	`false`	Discrete blocks; a number sets the count.
`squared`	`boolean`	`false`	Gap between fill and track.
`class`	`string`	`—`	Merged via cn(); Tailwind classes welcome.
`id`	`string`	`—`	Element id.
`ariaLabel`	`string`	`—`	Accessible name.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

FAQ

Is the value announced?

When label is set the component exposes a role="progressbar" with aria-valuenow. Without label, treat it as decorative.

Changelog

Version history mentioning Progress.

v0.1.0 — 2026-11-11

added

Data display (10): Badge, Avatar, Attachment, Table, Progress, Bubble, Chart, Empty, Tag, Timeline.
Missing semantic tokens: --ui-card, --ui-backdrop, --ui-backdrop-strong, --ui-progress-stripe, --ui-shadow-color, --ui-rating-1…5, --ui-text-3xl, --ui-space-0-5, --ui-space-7, and --ui-transition-delay.

fixed

Dialog, Lightbox, Sheet, and AlertDialog backdrops, Progress stripes, Carousel shadows, and Chart SVG shadows resolve through tokens instead of hard-coded colors.