Components
Progress [react-aria-components]
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.
import 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>
)
}
Dependencies
Source
Published
Similar components
Explore more
Part of Jolly UI — browse the full library on 21st.dev.