Progress Bar

1.0.0

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-bar

Additional props are passed to the <ProgressBar> element. See div docs for a list of props accepted by the <ProgressBar> element.

ProgressBar

NameTypeDefaultDescription

value*

number

Progress value from 0 to 100

appearance

'ai-generative'
'danger'
'neutral'
'primary'
'success'
'warning'

'neutral'

Change the visual style of the progress bar.

ProgressBar.Skeleton

NameTypeDefaultDescription

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.

width

string

Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.

data-testid

string

This is an attribute used to identify a DOM node for testing purposes.