Progress

Display task completion or time passage with progress bars.

Import

import { Progress } from 'asterui'

Examples

Basic Progress

Simple progress bar with value.

</>

import { Progress } from 'asterui'

function App() {
  return (
      <Progress value={70} className="w-56" />
    )
}

export default App

Color Variants

Different color schemes for progress bars.

</>

import { Progress } from 'asterui'

function App() {
  return (
      <div className="space-y-4">
        <Progress value={20} className="w-56" />
        <Progress type="primary" value={40} className="w-56" />
        <Progress type="secondary" value={60} className="w-56" />
        <Progress type="accent" value={80} className="w-56" />
      </div>
    )
}

export default App

Status Colors

Semantic colors for different states.

</>

import { Progress } from 'asterui'

function App() {
  return (
      <div className="space-y-4">
        <Progress type="info" value={40} className="w-56" />
        <Progress type="success" value={60} className="w-56" />
        <Progress type="warning" value={80} className="w-56" />
        <Progress type="error" value={100} className="w-56" />
      </div>
    )
}

export default App

Indeterminate

Progress bar without specific value (animated).

</>

import { Progress } from 'asterui'

function App() {
  return (
      <Progress className="w-56" />
    )
}

export default App

Sizes

Control width with Tailwind classes.

</>

import { Progress } from 'asterui'

function App() {
  return (
      <div className="space-y-4">
        <Progress type="primary" value={70} className="w-32" />
        <Progress type="primary" value={70} className="w-56" />
        <Progress type="primary" value={70} className="w-full" />
      </div>
    )
}

export default App

With Label

Progress with text label.

</>

Uploading...75%

import { Progress } from 'asterui'

function App() {
  return (
      <div className="space-y-2">
        <div className="flex justify-between text-sm">
          <span>Uploading...</span>
          <span>75%</span>
        </div>
        <Progress type="primary" value={75} className="w-full" />
      </div>
    )
}

export default App

API

Progress

Property	Description	Type	Default
value	Current progress value (0-100). Omit for indeterminate state	number	-
max	Maximum value	number	100
type	Color variant	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
className	Additional CSS classes	string	-

Accessibility

• Uses native <progress> element for accessibility
• Value is announced by screen readers
• Indeterminate state is properly communicated