Dinachi

Progress

A progress bar that communicates task completion to users and assistive technology.

View Source

#Installation

npx @dinachi/cli@latest add progress

#Usage

tsx
import {
  Progress,
  ProgressTrack,
  ProgressIndicator,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"

#Examples

Default Progress

A basic progress bar

Progress with Label

Progress bar with label and percentage value

Uploading...

Animated Progress

Progress bar with animated value changes

Loading0%

#API Reference

PropTypeDefaultDescription
valuenumber—The current progress value.
maxnumber100The maximum value that represents full completion.
getValueLabel(value: number, max: number) => string—Optional formatter for accessible progress value text.