Progress
BetaMuestra cuánto falta de una tarea con avance conocido.
registry/ds/progress.tsxSubiendo certificado.pdf
Pasos completados
Preparando tu informe
"use client";
import { useEffect, useState } from "react";
import { Progress } from "@/registry/ds/progress";
export default function ProgressBasic() {
const [value, setValue] = useState(15);
// Simula una subida que se reinicia al completar
useEffect(() => {
const id = setInterval(() => setValue((v) => (v >= 100 ? 0 : Math.min(100, v + 9))), 900);
return () => clearInterval(id);
}, []);
return (
<div className="flex w-72 flex-col gap-6">
<Progress value={value} label="Subiendo certificado.pdf" showValue />
<Progress value={3} max={8} label="Pasos completados" showValue size="lg" />
<Progress value={null} label="Preparando tu informe" size="sm" />
</div>
);
}Cuándo usarlo
Cuando sabés el porcentaje: subidas, pasos completados, cuotas usadas. Sin valor, se vuelve indeterminado (una franja que recorre la pista); si vas a usarlo así, probablemente sea un Spinner.
Color
El default es primary. Los semánticos son para cuotas, donde el color dice algo: verde completo, amarillo cerca del límite, rojo al borde.
Documentación
Cupo de la comisión
Almacenamiento
import { Progress } from "@/registry/ds/progress";
export default function ProgressColors() {
return (
<div className="flex w-72 flex-col gap-5">
<Progress value={100} color="success" label="Documentación" showValue />
<Progress value={82} color="warning" label="Cupo de la comisión" showValue />
<Progress value={96} color="danger" label="Almacenamiento" showValue />
</div>
);
}- No cambies el color a mitad de una subida: es ruido.
- El label dice qué avanza; el porcentaje dice cuánto.
| Size | Alto |
|---|---|
sm | 4 |
md | 6 |
lg | 8 |
Radio radius-full. Cambio de ancho en duration/base (300 ms).
| Parte | Propiedad | Token |
|---|---|---|
| Pista | Fondo | bg/surface |
| Relleno | Fondo | primary/solid |
| Relleno · semánticos | Fondo | success/solid |
| Label | Color | text/default |
| Valor | Color | text/muted |
Instalación
npx shadcn@latest add https://polen.cdc.cool/r/progress.jsonPlayground
Configurá el componente y copiá el snippet: se genera del mismo estado que renderiza el preview.
Subiendo certificado.pdf
Valor
size
color
<Progress value={50} label="Subiendo certificado.pdf" showValue />Sobre Base UI Progress.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
value | number | null | — | Requerido. null = indeterminado. |
max | number | 100 | Total. |
size | "sm" | "md" | "lg" | "md" | Alto 4 / 6 / 8. |
color | "primary" | "success" | "warning" | "danger" | "primary" | Semánticos solo para cuotas. |
label | ReactNode | — | Qué avanza. |
showValue | boolean | false | Muestra el porcentaje. |
aria-label | string | — | Nombre accesible cuando no hay label visible: en una tabla o una card. |
role="progressbar" con aria-valuenow, -valuemin, -valuemax y
-valuetext ("45%"); el label lo nombra. Sin animación con
prefers-reduced-motion.