Progress

Install

npx shadcn@latest add https://plinth.dhrumilkherde.com/r/progress.json

Usage

import { Progress, ProgressCircle } from "@/components/ui/progress";

<Progress value={uploadPercent} showValue />
<ProgressCircle value={score} size={48} showValue />

Props

Progress: value (0-100, or null for indeterminate), showValue.

ProgressCircle: value, size (px, default 48), strokeWidth (default 5), showValue.

Accessibility

• Both expose role="progressbar" with aria-valuenow/min/max; the linear bar comes from Base UI Progress.
• For loading states without a known percentage, prefer the Spinner or an indeterminate Progress.