Progress

Overview

Progress displays a visual bar indicating how much of a task or process has been completed. It supports determinate (known percentage) and indeterminate (loading) states.

Usage

export function Example() {
  return <Progress value={42} label="Uploading" showValue />;
}

Variants

Default

  <Progress value={50} label="Loading" />

Success

  <Progress value={100} variant="success" label="Complete" />

Warning

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

Destructive

  <Progress value={90} variant="destructive" label="Critical" showValue />

Sizes

States

Indeterminate

  <Progress indeterminate label="Loading..." />

Accessibility

• role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
• aria-valuetext provides human-readable value ("42 percent" or "Loading")
• aria-label for accessible name

API Reference

Related Components

• Spinner — Unknown duration loading
• Skeleton — Placeholder for loading content