Progress

A linear progress bar to indicate task completion with optional percentage label. Supports custom styling through className and accessible attributes.

Installation

Usage

import { Progress } from "@/registry/core/progress";

export default () => <Progress progress={50} withLabel />;

Examples

Basic Progress

<Progress progress={30} />

Progress with Label

<Progress progress={75} withLabel />

API Reference

Progress

Extends div element props.

Accessibility

• Uses role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax, and aria-valuetext.
• Fully keyboard and screen-reader accessible.

Notes

• The bar smoothly fills based on the progress prop.
• Works well inside flex layouts.
• Label is optional and aligns next to the progress bar.
• Rounded corners and overflow handling are applied for cross-browser compatibility.