Progress

Progress bar showing the current progress of an operation or task.

Basic Usage

Set percentage with the percent prop.

import { Progress } from '@airo-ui/react'

function Demo() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Progress percent={25} />
      <Progress percent={50} />
      <Progress percent={75} />
      <Progress percent={100} />
    </div>
  )
}

Size

<Progress percent={60} size="sm" />
<Progress percent={60} size="md" />
<Progress percent={60} size="lg" />

Custom Colors

<Progress percent={70} color="#a78bfa" />

Hide Percentage

<Progress percent={80} showInfo={false} />

API

Props

Name	Type	Default	Description
percent	number	0	Percentage, range 0--100
size	'sm' | 'md' | 'lg'	'md'	Size
color	string	--	Fill color, defaults to accent
showInfo	boolean	true	Show percentage text

Interaction

• Width transition uses smooth easing curve
• Auto-switches to success color at 100%
• Full ARIA progressbar semantics
• Respects prefers-reduced-motion