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.
Loading preview...
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>
)
}