Progress

Progress bar with glow effect, labels, and variant colors. Visualizes completion status for uploads, tasks, or system metrics.

Variants

Preview
Upload Progress65%
Complete100%
Storage30%
CPU Load85%

Without Label

Preview

Props

PropTypeDefaultDescription
valuenumber-Progress value from 0 to 100.
variant"default" | "success" | "warning" | "destructive""default"Color variant for the progress bar.
labelstring-Label text displayed above the progress bar.
maxnumber100Maximum value for the progress bar range.
showValueboolean-Show the percentage value alongside the label.
classNamestring-Additional CSS classes.

Accessibility

  • Uses role="progressbar" with aria-valuenow, aria-valuemin, and aria-valuemax attributes
  • The label prop is linked via aria-labelledby so screen readers announce the progress context
  • Color variants should not be the sole indicator of meaning — use the label to convey status
  • Passes through all standard HTML attributes including aria-*