Components
Loading preview...
Progress bars show either determinate or indeterminate progress of an operation over time. The <progress> HTML element can be used to build a progress bar, however it is very difficult to style cross browser. ProgressBar helps achieve accessible progress bars and spinners that can be styled as needed.
@jolbol1
npx shadcn@latest add https://21st.dev/r/jolbol1/progressimport React from "react"
import { Label } from "@/components/ui/field"
import { Progress } from "@/components/ui/progress"
export function ProgressDemo() {
const [progress, setProgress] = React.useState(13)
React.useEffect(() => {
const timer = setTimeout(() => setProgress(80), 500)
return () => clearTimeout(timer)
}, [])
return (
<Progress value={progress} className={"w-3/5"}>
{({ valueText }) => (
<div className="flex w-full justify-between">
<Label>Loading...</Label>
<span className="value">{valueText}</span>
</div>
)}
</Progress>
)
}