Progress

Exibe conclusão de tarefa ou passagem de tempo com barras de progresso.

Importação

import { Progress } from 'asterui'

Exemplos

Progresso Básico

Barra de progresso simples com valor.

</>

import { Progress } from 'asterui'

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

export default App

Variantes de Cores

Diferentes esquemas de cores para barras de progresso.

</>

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

Cores de Status

Cores semânticas para diferentes estados.

</>

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

Indeterminado

Barra de progresso sem valor específico (animada).

</>

import { Progress } from 'asterui'

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

export default App

Tamanhos

Controle a largura com classes Tailwind.

</>

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

Com Rótulo

Progresso com rótulo de texto.

</>

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

Propriedade	Descrição	Tipo	Padrão
value	Valor de progresso atual (0-100). Omita para estado indeterminado	number	-
max	Valor máximo	number	100
type	Variante de cor	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
className	Classes CSS adicionais	string	-

Acessibilidade

• Usa elemento nativo <progress> para acessibilidade
• Valor é anunciado por leitores de tela
• Estado indeterminado é comunicado apropriadamente