Progress

Linear progress indicator for uploads, task completion, and loading states that need a clear sense of advancement inside page content.

AccessibleDark ModeAnimated

Install

$npx react-principles add progress

Live Demo

Open in Storybookopen_in_new

35%

Code Snippet

src/ui/Progress.tsx

import { Progress } from "@/ui/Progress";

<Progress value={72} max={100} />

Copy-Paste (Single File)

Progress.tsx

import type { HTMLAttributes } from "react";
import { cn } from "@/lib/utils";

export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
  value: number;
  max?: number;
}

export function Progress({ value, max = 100, className, ...props }: ProgressProps) {
  const safeMax = max > 0 ? max : 100;
  const clamped = Math.min(Math.max(value, 0), safeMax);
  const percentage = (clamped / safeMax) * 100;

  return (
    <div
      role="progressbar"
      aria-valuemin={0}
      aria-valuemax={safeMax}
      aria-valuenow={Math.round(clamped)}
      className={cn("h-2 w-full overflow-hidden rounded-full bg-slate-200 dark:bg-[#1f2937]", className)}
      {...props}
    >
      <div
        className="h-full transition-all duration-300 rounded-full bg-primary"
        style={{ width: `${percentage}%` }}
      />
    </div>
  );
}

Props

Prop	Type	Default	Description
`value`	`number`	`—`	Current progress value before clamping.
`max`	`number`	`100`	Maximum progress range used to calculate the fill percentage.
`className`	`string`	`—`	Additional classes merged into the progress track.

react-principles