Progress

A progress bar that visualizes task completion, with colors, labels, stacked segments, stripes, and animation.

Default

tsx

import { Progress } from "@hummingbirdui/react";

export default function ProgressDefault() {
  return <Progress value={50} aria-label="50 percent" />;
}

Colors

The color prop on Progress.Bar changes the bar's background.

tsx

import { Progress } from "@hummingbirdui/react";

const bars = [
  { color: "primary", value: 20 },
  { color: "secondary", value: 30 },
  { color: "warning", value: 40 },
  { color: "danger", value: 50 },
  { color: "info", value: 60 },
  { color: "success", value: 70 },
] as const;

export default function ProgressColors() {
  return (
    <div className="mx-auto flex w-full max-w-sm flex-col gap-3">
      {bars.map(({ color, value }) => (
        <Progress key={color} value={value} aria-label={`${color} progress`}>
          <Progress.Bar color={color} />
        </Progress>
      ))}
    </div>
  );
}

Height

The track height is adjusted with a height utility on the root.

tsx

import { Progress } from "@hummingbirdui/react";

export default function ProgressHeight() {
  return (
    <div className="mx-auto flex w-full max-w-sm flex-col gap-3">
      <Progress value={40} aria-label="Default height">
        <Progress.Bar />
      </Progress>
      <Progress value={40} className="h-2" aria-label="Taller">
        <Progress.Bar />
      </Progress>
      <Progress value={40} className="h-3" aria-label="Tallest">
        <Progress.Bar />
      </Progress>
    </div>
  );
}

Labels

Content inside Progress.Bar renders as a label on the bar.

25%

50%

75%

tsx

import { Progress } from "@hummingbirdui/react";

export default function ProgressLabels() {
  return (
    <div className="mx-auto flex w-full max-w-sm flex-col gap-3">
      <Progress value={25} className="h-3" aria-label="A quarter done">
        <Progress.Bar>25%</Progress.Bar>
      </Progress>
      <Progress value={50} className="h-3" aria-label="Half done">
        <Progress.Bar color="danger">50%</Progress.Bar>
      </Progress>
      <Progress value={75} className="h-3" aria-label="Three quarters done">
        <Progress.Bar color="success">75%</Progress.Bar>
      </Progress>
    </div>
  );
}

Multiple bars

Progress.Stacked combines several progress segments in one track; each segment is sized by its own value.

tsx

import { Progress } from "@hummingbirdui/react";

export default function ProgressStacked() {
  return (
    <Progress.Stacked className="mx-auto h-3 w-full max-w-sm gap-0.5">
      <Progress value={20} aria-label="Segment one">
        <Progress.Bar />
      </Progress>
      <Progress value={15} aria-label="Segment two">
        <Progress.Bar color="secondary" />
      </Progress>
      <Progress value={10} aria-label="Segment three">
        <Progress.Bar color="danger" />
      </Progress>
      <Progress value={25} aria-label="Segment four">
        <Progress.Bar color="info" />
      </Progress>
    </Progress.Stacked>
  );
}

Striped

Setting striped overlays a striped pattern on the bar.

tsx

import { Progress } from "@hummingbirdui/react";

const bars = [
  { color: "primary", value: 20 },
  { color: "secondary", value: 30 },
  { color: "danger", value: 40 },
  { color: "warning", value: 60 },
  { color: "success", value: 80 },
] as const;

export default function ProgressStriped() {
  return (
    <div className="mx-auto flex w-full max-w-sm flex-col gap-3">
      {bars.map(({ color, value }) => (
        <Progress
          key={color}
          value={value}
          className="h-2"
          aria-label={`${color} striped progress`}
        >
          <Progress.Bar color={color} striped />
        </Progress>
      ))}
    </div>
  );
}

Animated stripes

Combine animated with striped to animate the stripe pattern.

tsx

import { Progress } from "@hummingbirdui/react";

export default function ProgressAnimated() {
  return (
    <Progress value={60} className="mx-auto h-3 w-full max-w-sm" aria-label="Uploading">
      <Progress.Bar striped animated />
    </Progress>
  );
}

API Reference

Built on the Radix UI Progress primitive. Each part forwards all props to its Radix counterpart.

Progress

Prop	Type	Default
`asChild`	`boolean`	`false`
`value`	`number`	—
`max`	`number`	`100`
`getValueLabel`	`function`	—
`className`	`string`	—

Data attribute	Values
`[data-state]`	`"complete" \| "indeterminate" \| "loading"`
`[data-value]`	`The current value`
`[data-max]`	`The max value`

Progress.Bar

Prop	Type	Default
`asChild`	`boolean`	`false`
`color`	`enum`	`"primary"`
`striped`	`boolean`	—
`animated`	`boolean`	—
`className`	`string`	—

Data attribute	Values
`[data-state]`	`"complete" \| "indeterminate" \| "loading"`
`[data-value]`	`The current value`
`[data-max]`	`The max value`

Progress.Stacked

Prop	Type	Default
`className`	`string`	—

Styling

Hummingbird React progress is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available progress classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousPopover NextScroll Area