Progress

Task completion indicators

FeedbackStable

Preview

Interactive preview of the Progress component with different variants.

Uploading files...75%

Installation complete100%

Processing...45%

Downloading...30%

Installation

Install the package via npm:

bash

npm install apex-design-system

Import

tsx

import { Progress } from 'apex-design-system';

Basic Usage

tsx

<Progress value={60} />

Variants

The component supports multiple visual variants:

tsx

<Progress value={60} variant="default" />
<Progress value={80} variant="success" />
<Progress value={45} variant="warning" />
<Progress value={20} variant="error" />

Accessibility

This component follows WAI-ARIA best practices and is WCAG 2.1 AA compliant. It includes proper keyboard navigation, focus management, and screen reader support.

View in Storybook View source