Progress

Muestra la finalización de tareas o el paso del tiempo con barras de progreso.

Importar

import { Progress } from 'asterui'

Ejemplos

Progreso básico

Barra de progreso simple con valor.

</>

import { Progress } from 'asterui'

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

export default App

Variantes de color

Diferentes esquemas de color para barras de progreso.

</>

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

Colores de estado

Colores semánticos 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 progreso sin valor específico (animada).

</>

import { Progress } from 'asterui'

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

export default App

Tamaños

Controla el ancho con clases de 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

Con etiqueta

Progreso con etiqueta 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

Propiedad	Descripción	Tipo	Predeterminado
value	Valor de progreso actual (0-100). Omitir para estado indeterminado	number	-
max	Valor máximo	number	100
type	Variante de color	'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
className	Clases CSS adicionales	string	-

Accesibilidad

• Usa elemento nativo <progress> para accesibilidad
• El valor es anunciado por lectores de pantalla
• El estado indeterminado se comunica apropiadamente