import * as React from "react";
import { Progress } from "@/components/ui/progress";
export function ProgressDemo() {
const [value, setValue] = React.useState(0);
React.useEffect(() => {
const interval = window.setInterval(() => {
setValue((current) =>
Math.min(100, Math.round(current + Math.random() * 25))
);
}, 1000);
return () => clearInterval(interval);
}, []);
return (
<Progress value={value} className="min-w-xs" />
);
}Installation
npx shadcn@latest add "https://eo-n.vercel.app/r/progress"Usage
Import all parts and piece them together.
import { Progress, ProgressValue } from "@/components/ui/progress";<Progress value={56} />Examples
With Label
Loading...
import * as React from "react";
import { Progress, ProgressLabel } from "@/components/ui/progress";
export function ProgressWithLabel() {
const [value, setValue] = React.useState(0);
React.useEffect(() => {
const interval = window.setInterval(() => {
setValue((current) =>
Math.min(100, Math.round(current + Math.random() * 25))
);
}, 1000);
return () => clearInterval(interval);
}, []);
return (
<Progress value={value} className="min-w-xs">
<ProgressLabel>Loading...</ProgressLabel>
</Progress>
);
}With Value
Downloading...
import * as React from "react";
import {
Progress,
ProgressLabel,
ProgressValue,
} from "@/components/ui/progress";
export function ProgressWithValue() {
const [value, setValue] = React.useState(0);
React.useEffect(() => {
const interval = window.setInterval(() => {
setValue((current) =>
Math.min(100, Math.round(current + Math.random() * 25))
);
}, 1000);
return () => clearInterval(interval);
}, []);
return (
<Progress value={value} className="min-w-xs">
<ProgressLabel>Downloading...</ProgressLabel>
<ProgressValue />
</Progress>
);
}