Progress Bar
<ProgressBar>TailwindCSS ModulesA determinate progress indicator that visualizes the completion status of a task or process.
InstallationColoxo CLI
npx coloxo add progress-bar --style coloxo-cssES Module ImportPlayground / npm package
import { ProgressBar } from '@coloxo/ui';Design Tokens:
--cx-brand-600: #2348FF--cx-bg-secondary: #F8FAFC--cx-radius-full: 9999pxheight: 8px
1. Variant Matrix
Progress bars can optionally display a descriptive label and a percentage value.
| Standard | Without Label | Without Percentage | |
|---|---|---|---|
| Default |
2. Interactive Props Configurator
Show Label
Show Percentage
Visual Render Canvas
tsx
<ProgressBar label="Upload" value={62}/>3. Dark theme
The progress track uses a subdued secondary background in dark mode, allowing the brand-colored fill to stand out.
4. Enterprise layout compositions
Commonly used within cards or lists to indicate resource usage or onboarding progress.
Setup Guide
Complete these steps to activate your account.
Accessibility
Native Semantics
The track element automatically applies `role="progressbar"` and maps `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`.
Value Clamping
The internal width percentage is strictly clamped between 0 and 100%, preventing layout breakage on invalid inputs.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | number | — | Current progress value. |
| max | number | 100 | Maximum value. |
| label | ReactNode | — | Header label describing the task. |
| showValue | boolean | true | Show percentage text. |
| size | "sm" | "md" | "lg" | md | Thickness of the track. |