Displays the status of a task that takes a long time.
"use client";
import * as React from "react";
import { Progress } from "@/components/ui/progress";
export default function Particle() {
const [value, setValue] = React.useState(20);
React.useEffect(() => {
const interval = setInterval(() => {
setValue((current) =>
Math.min(100, Math.round(current + Math.random() * 25)),
);
}, 1000);
return () => clearInterval(interval);
}, []);
return <Progress value={value} />;
}
pnpm dlx cnippet@latest add progress
import {
Progress,
ProgressLabel,
ProgressValue,
} from "@/components/ui/progress"<Progress value={40} />Note: If you render children inside Progress, you must also include ProgressTrack and ProgressIndicator inside it. Without them, the bar will not display. When no children are provided, a default track and indicator are rendered for you.