Progress

Name: a13y
Rating: 5.0 (1 reviews)
Author: Diego Aneli

An accessible progress indicator component supporting both linear and circular variants, determinate and indeterminate states, with ARIA live region announcements.

Linear Progress

Standard linear progress bar.

Auto-updating progress0%

25% complete25%

75% complete75%

import { AccessibleProgress } from '@a13y/react';

function Example() {
  return (
    <AccessibleProgress
      value={75}
      max={100}
      label="Upload progress"
    />
  );
}

Indeterminate State

Use for operations with unknown duration.

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

Circular Variant

Circular progress indicator with value display.

Auto-updating circular progress0%

<AccessibleProgress
  value={60}
  max={100}
  label="Completion"
  variant="circular"
  size={120}
  showValue
/>

Props

Name	Type	Default	Description
`value`	`number`	-	Current progress value (omit for indeterminate)
`max`	`number`	`100`	Maximum value for the progress
`label*`	`string`	-	Accessible label for the progress indicator
`indeterminate`	`boolean`	`false`	Show indeterminate/loading state
`variant`	`'linear' \| 'circular'`	`'linear'`	Visual style of the progress indicator
`size`	`number`	`80`	Size in pixels (for circular variant)
`showValue`	`boolean`	`false`	Display the percentage value
`announceOnMilestone`	`boolean`	`true`	Announce progress at 25%, 50%, 75%, 100%
`className`	`string`	-	Optional CSS class

Accessibility Features

✓Uses role="progressbar" with proper ARIA attributes
✓aria-valuenow, aria-valuemin, and aria-valuemax for screen readers
✓Live region announcements at milestone percentages (25%, 50%, 75%, 100%)
✓Indeterminate state properly communicated to assistive technologies
✓Respects reduced motion preferences