Progress
Determinate progress indicator showing completion percentage.
Examples
25%
Quarter-complete progress bar.
50%
Half-complete progress bar.
75%
Three-quarter-complete progress bar.
100%
Fully complete progress bar.
With label
Progress bar accompanied by a percentage label.
Animated / Controlled
Progress bar that animates to target value.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Progress } from "@rokle/components";import { Progress } from "@rokle/components";
export function Example() {
return (
<div className="flex flex-col gap-4 max-w-sm">
<Progress value={25} />
<Progress value={50} />
<Progress value={75} />
<Progress value={100} />
</div>
);
}Source
The implementation source for this component. Copy it into your project and customise.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | - | Current progress value. |
| max | number | 100 | Maximum value. |