Progress Bar
El componente Progress Bar nos permite mostrar el progreso de una tarea.
import React from "react";
import { ProgressBar } from "@nimbus-ds/components";
const Example: React.FC = () => <ProgressBar appearance="primary" value={50} />;
export default Example;Progress Bar
El componente Progress Bar muestra visualmente el estado de avance de una tarea en curso o proceso. Sirve para informar al usuario del porcentaje completado, reforzar la percepción de control y establecer expectativas de duración, carga o nivel de completitud. Su uso es clave para mantener la atención y confianza del usuario en operaciones que requieren espera activa o pasiva.
- Para indicar el avance de una operación como carga de archivos, sincronización, instalación, etc.
- En procesos largos donde se debe informar al usuario del estado para evitar incertidumbre.
- En flujos multi-paso o tareas que requieren confirmación de progreso antes de continuar.
- Como indicador de completitud de atributos, como por ejemplo cuánto crédito o presupuesto ha utilizado el usuario respecto del total disponible.
- Cuando la operación es instantánea o casi imperceptible (menos de 1 segundo).
- Si no se puede medir el progreso real (usar en ese caso un spinner o feedback genérico).
- Para mostrar éxito o error final (usar un toast o mensaje de estado complementario).
- Feedback instantáneo y visible: refuerza la percepción de respuesta del sistema.
- Evita pantallas de confirmación innecesarias: el progreso se muestra inline, manteniendo el flujo del usuario.
- Reduce fricción: hace explícita la duración estimada o el estado de completitud y minimiza la incertidumbre.
- Permite multitarea: el usuario puede continuar otras acciones mientras observa el progreso.
- Usar atributos aria-valuenow, aria-valuemin, aria-valuemax, aria-label.
- Permitir que el componente sea leído por lectores de pantalla.
- Garantizar que el progreso sea entendible sin depender solo del color.
El componente puede incluir:
- Track: fondo que indica la base del progreso.
- Bar: línea de avance, color variable según contexto.
- Label (opcional): texto indicando el porcentaje o estado (ej. "Cargando…").
- #Text (opcional para labels)
- #Color tokens del sistema (success, warning, danger, primary, neutral)
- Default: color neutro, para cargas generales.
- Primary: usado para flujos principales del negocio.
- Success: para indicar que el progreso va correctamente.
- Warning: cuando hay riesgo o demora.
- Danger: para errores o procesos con fallo.
- AI Interactive: versión animada e interactiva para flujos con IA.
✅ Do
- Mostrar valores cuando estén disponibles.
- Usar variantes de color según el contexto de éxito, error o advertencia.
❌ Don't
- No usar si no puedes estimar el progreso.
- No confiar únicamente en color para comunicar el estado.
- No usar múltiples barras de progreso al mismo tiempo sin jerarquía visual.
Instalá el componente via terminal.
npm install @nimbus-ds/progress-barLas propiedades adicionales se pasan al elemento <ProgressBar>. Consultá la documentación para ver la lista de atributos aceptados por el elemento <ProgressBar>.
ProgressBar
| Name | Type | Default | Description |
|---|---|---|---|
value* | number | Progress value from 0 to 100 | |
appearance | 'ai-generative' | 'neutral' | Change the visual style of the progress bar. |
ProgressBar.Skeleton
| Name | Type | Default | Description |
|---|---|---|---|
width | string | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. | |
className | string | ||
height | string | Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card. | |
data-testid | string | This is an attribute used to identify a DOM node for testing purposes. |