Progress

A linear progress indicator for displaying task completion percentage. Supports static values, labeled steps, and dynamic updates.

Installation

bash

npx polyui add progress

Basic

tsx

import { Progress } from "@polyui/react/progress"
export function ProgressBasic() {
  return (
    <div className="flex flex-col gap-4 w-full max-w-sm">
      <Progress value={25} />
      <Progress value={50} />
      <Progress value={75} />
      <Progress value={100} />
    </div>
  )
}

Different Values

tsx

import { Progress } from "@polyui/react/progress"
export function ProgressDifferentValues() {
  return (
    <div className="flex flex-col gap-4 w-full max-w-sm">
      <Progress value={0} />
      <Progress value={25} />
      <Progress value={50} />
      <Progress value={75} />
      <Progress value={100} />
    </div>
  )
}

With Label

Step 1100%

Step 260%

Step 320%

tsx

import { Progress } from "@polyui/react/progress"
export function ProgressWithLabel() {
  const steps = [
    { label: "Step 1", value: 100 },
    { label: "Step 2", value: 60 },
    { label: "Step 3", value: 20 },
  ]

  return (
    <div className="flex flex-col gap-5 w-full max-w-sm">
      {steps.map((step) => (
        <div key={step.label}>
          <div className="flex justify-between mb-1.5 text-sm">
            <span>{step.label}</span>
            <span className="text-muted-foreground">{step.value}%</span>
          </div>
          <Progress value={step.value} />
        </div>
      ))}
    </div>
  )
}

Props

属性	类型	默认值	说明
`value`	`number`	`0`	Current progress value, between 0 and max.
`max`	`number`	`100`	Maximum progress value. Defaults to 100.
`className`	`string`	`—`	Additional CSS class names.