Docs
Progress

Progress

Progress bars show either determinate or indeterminate progress of an operation over time.

react-aria-components

Installation

Copy and paste the following code into your project.

"use client"
 
import * as React from "react"
import { ProgressBar, ProgressBarProps } from "react-aria-components"
 
import { cn, cnv } from "@/lib/utils"
 
export interface ProgressProps extends ProgressBarProps {
  barClassName?: string
  fillClassName?: string
}
 
const Progress = ({
  className,
  barClassName,
  fillClassName,
  children,
  ...props
}: ProgressProps) => (
  <ProgressBar
    className={(values) => cnv(values, "w-full", className)}
    {...props}
  >
    {(values) => (
      <>
        {typeof children === "function" ? children(values) : children}
        <div
          className={cn(
            "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
            barClassName
          )}
        >
          <div
            className={cn(
              "h-full w-full flex-1 bg-primary transition-all",
              fillClassName
            )}
            style={{
              transform: `translateX(-${100 - (values.percentage || 0)}%)`,
            }}
          />
        </div>
      </>
    )}
  </ProgressBar>
)
 
export { Progress }

Update the import paths to match your project setup.

Usage

Basic

Value Label

Values are formatted as a percentage by default, but this can be modified by using the formatOptions prop to specify a different format. formatOptions is compatible with the option parameter of Intl.NumberFormat and is applied based on the current locale.

For more options see react aria components docs.

Progress13%
MeterLabel