Skip to content

Progress Bar

An indicator showing the completion progress of a task. Implements the role="progressbar" pattern.

The ProgressBar communicates the status of a long-running process to all users, including those using assistive technology.

Accessibility Features

  • Semantic Progress: Correctly sets aria-valuenow, aria-valuemin, and aria-valuemax.
  • Percentage Announcement: Screen readers announce the progress as a percentage or fraction.

Usage Example

import { ProgressBar } from '@holmdigital/components'; <ProgressBar value={65} max={100} label="Uploading file..." />