Installation
npm install @marmoui/uiyarn add @marmoui/uipnpm add @marmoui/uibun add @marmoui/uiUsage
import { Progress } from '@marmoui/ui';Examples
Basic Progress
Default
Simple progress bar
<Progress value={60} />Various States
Progress States
Different completion levels
<div className="flex flex-col gap-4">
<Progress value={0} />
<Progress value={25} />
<Progress value={50} />
<Progress value={75} />
<Progress value={100} />
</div>Best Practices
✓
Show percentage or label
Pair the progress bar with a percentage or descriptive label for clarity.
✓
Update in real-time
Progress should update smoothly as the task advances.
✗
Don't use for indeterminate waits
If you don't know the progress percentage, use Spinner instead.
✗
Don't fake progress
Don't artificially animate progress. Show real completion data.
Props
Props
Accessibility
- Uses
role="progressbar"witharia-valuenow,aria-valuemin,aria-valuemax. - Screen readers announce the current progress percentage.
- Ensure the progress bar has sufficient color contrast against its background.