Components

Progress

A progress bar that visually indicates the completion status of a task or process. Supports sizes, colors, labels, and striped/animated styles.

Installation

npm install @trinkui/react

Import

import { Progress } from "@trinkui/react";

Usage

Set the value prop to a number between 0 and 100.

<Progress value={45} />

<Progress value={75} label="Uploading..." showValue />

Sizes

Available in three sizes: sm, md, and lg.

<Progress size="sm" value={30} />
<Progress size="md" value={50} />
<Progress size="lg" value={70} />

Colors

Use the color prop to change the fill color.

<Progress color="primary" value={60} />
<Progress color="secondary" value={60} />
<Progress color="success" value={60} />
<Progress color="warning" value={60} />
<Progress color="danger" value={60} />

Striped and Animated

Add visual flair with striped patterns and animation.

{/* Striped pattern */}
<Progress value={65} striped />

{/* Striped with animation */}
<Progress value={65} striped animated />

Label and Value Display

Show a label and percentage value alongside the progress bar.

<Progress value={80} label="Storage used" showValue />

Props

Prop	Type	Default	Description
value	number	0	Current progress value between 0 and 100
size	"sm" \| "md" \| "lg"	"md"	Height of the progress bar
color	"primary" \| "secondary" \| "success" \| "warning" \| "danger"	"primary"	Fill color of the progress bar
showValue	boolean	false	Display the percentage value text
label	string	-	Label text displayed above the progress bar
striped	boolean	false	Apply a striped pattern to the progress fill
animated	boolean	false	Animate the striped pattern (requires striped=true)

Accessibility

Uses role="progressbar" for proper semantic meaning.
Applies aria-valuenow, aria-valuemin, and aria-valuemax to communicate progress to assistive technologies.
When a label is provided, it is used as aria-label for the progress bar.
Respects prefers-reduced-motion — striped animation is paused for users who prefer reduced motion.

← Popover Radio Group →