Progress [react-aria-components]

Component 16

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Progress [react-aria-components] to your project and fits it to your theme.

Code

How Progress [react-aria-components] is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  )
}