Progress
Displays the status of a task that takes a long time.
Progress wraps the Base UI
Progress primitive and composes
its label, track, indicator and value parts. Root renders a default track and
indicator when it has no children, and each part marks itself with data-slot.
Installation
npx shadcn@latest add @kosori/progressExample
progress-example.tsx
'use client';
import { useEffect, useState } from 'react';
import { Progress } from '@/components/ui/progress';
const ProgressExample = () => {
const [value, setValue] = useState(20);
useEffect(() => {
const interval = setInterval(() => {
setValue((current) =>
Math.min(100, Math.round(current + Math.random() * 25))
);
}, 1000);
return () => clearInterval(interval);
}, []);
return <Progress aria-label='Loading progress' value={value} />;
};
export default ProgressExample;
Usage
import { Progress } from '@/components/ui/progress';
const ProgressDemo = () => <Progress value={60} />;