66 lines
1.5 KiB
Markdown
66 lines
1.5 KiB
Markdown
- Home
|
|
- Components
|
|
- Progress
|
|
|
|
# Progress
|
|
|
|
Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
|
|
|
|
## Props
|
|
|
|
|
|
Prop Type Default Description
|
|
value number 0 The progress value (0-100)
|
|
max number 100 The maximum value
|
|
className string - Additional CSS classes
|
|
...progress props ComponentProps<typeof ProgressPrimitive.Root> - All Radix Progress props are supported
|
|
|
|
## Basic Usage
|
|
|
|
```
|
|
<div className="w-60 space-y-6">
|
|
<div className="flex flex-col gap-1 items-end">
|
|
<span className="text-uk-md text-text-secondary">0%</span>
|
|
<Progress value={0} />
|
|
</div>
|
|
<div className="flex flex-col gap-1 items-end">
|
|
<span className="text-uk-md text-text-secondary">50%</span>
|
|
<Progress value={50} />
|
|
</div>
|
|
<div className="flex flex-col gap-1 items-end">
|
|
<span className="text-uk-md text-text-secondary">100%</span>
|
|
<Progress value={100} />
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## Animated Progress
|
|
|
|
```
|
|
function AnimatedProgress() {
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setProgress((prev) => {
|
|
if (prev >= 100) return 0;
|
|
return prev + 10;
|
|
});
|
|
}, 500);
|
|
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="w-60 space-y-4">
|
|
<div className="flex justify-between">
|
|
<span className="text-sm font-medium">Animated Progress</span>
|
|
<span className="text-sm text-muted-foreground">{progress}%</span>
|
|
</div>
|
|
<Progress value={progress} />
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|