ascii.cnlibs.com
GithubX

Progress

Shows completion progress of a task.

[############]x

## installation

pnpm dlx shadcn@latest add https://ascii.cnlibs.com/r/progress.json

## usage

import { Progress } from "@/components/ui/progress";
<Progress value={62} />

## complete

[####################]x

## custom label

label replaces the percentage next to the bar.

[############]x

## wide bar

barWidth sets the bar length in characters (default 20).

[####################]x

## custom range

[########]x

## empty

[]x

## indeterminate

value={null} draws an empty bar for work of unknown length.

[]x