La Progress Bar es un componente utilizado para representar visualmente el avance de un proceso, tarea o carga en curso. Su función es ofrecer al usuario una referencia clara y rápida del progreso, reduciendo la incertidumbre mientras espera la finalización de una acción.
30 segundos restantes
Progreso dinámico con label y descripción
Importa el componente Progress desde la librería.
1import 'nave-ui-library/styles.css'2import { Progress } from 'nave-ui-library/react'Ejemplo completo con label, porcentaje, icono y descripción.
30 segundos restantes
Solo la barra de progreso, sin texto adicional.
Barra con label descriptivo y porcentaje visible.
Todas las props disponibles para el componente Progress.
| Prop | Type | Default | Description |
|---|---|---|---|
valuereq | number | — | Valor de progreso (0 a 100). |
label | string | — | Título descriptivo. |
showValue | boolean | false | Muestra el porcentaje. |
description | string | — | Texto informativo inferior. |
icon | ReactNode | — | Icono para la descripción. |
1{2 "name": "Progress",3 "description": "Barra de progreso para mostrar avance.",4 "component": "Progress",5 "files": [6 "components/base/data-display/system-feedback/Progress.tsx"7 ],8 "dependencies": [9 "react",10 "@radix-ui/react-progress"11 ],12 "props": {13 "value": {14 "type": "number",15 "description": "Current progress value."16 }17 }18}