Progress Progreso
Introduction
Un componente de estado visual que comunica el progreso de finalización de una operación. Muestra valores de estado en tiempo real mediante un rastreador de barra lineal estándar o un indicador de dial circular moderno. Se usa principalmente para guiar a los usuarios durante asistentes multi-paso, cargas de contenido, procesamiento de archivos o instalaciones del sistema.
El componente Progress está totalmente integrado como bloque progress en el Page Builder, permitiendo a autores y desarrolladores configurar fácilmente rangos visuales, temas, tamaños, etiquetas y diseños de indicadores directamente en el CMS.
Usage
Estos ejemplos ilustran cómo los editores de contenido enlazan y estructuran indicadores de progreso interactivos.
1. Barra de progreso lineal estándar con etiqueta de estado
Un indicador de barra lineal clásico que muestra el progreso de descarga o procesamiento con detalles de etiqueta activa y texto de porcentaje formateado.
{
"type": "progress",
"label": "System Backup",
"value": 72,
"showValueText": true,
"type": "linear",
"size": "md"
}
2. Medidor de progreso circular compacto
Renderiza la métrica de finalización como un dial circular compacto. Útil para gráficos de resumen estadístico, widgets de panel o elementos de cuadrícula aislados.
{
"type": "progress",
"label": "Storage Used",
"type": "circular",
"value": 40,
"showValueText": true
}
3. Progreso con franjas y color personalizado (verde de éxito)
Demuestra cómo aplicar una paleta de tema de color dedicada, un patrón de franjas visuales y una escala de diseño grande a una barra de progreso.
{
"type": "progress",
"label": "Uploading media files",
"value": 85,
"showValueText": true,
"striped": true,
"colorPalette": "green",
"size": "lg"
}
Props
| Propiedad | Tipo de campo CMS | Predeterminado | Descripción / opciones admitidas |
|---|---|---|---|
Etiqueta de progreso (label) | string | - | Encabezado descriptivo opcional sobre el rastreador. |
Valor actual (value) | number | 0 | Valor numérico de finalización. Use null para un estado indeterminado (carga). |
Valor mínimo (min) | number | 0 | Límite inferior de la escala de progreso. |
Valor máximo (max) | number | 100 | Límite superior de la escala de progreso. |
Mostrar porcentaje (showValueText) | boolean | false | Muestra el texto de porcentaje exacto junto al rastreador. |
Tipo de indicador (type) | select | "linear" | Formato visual del diseño. • Opciones: "linear", "circular". |
Variante visual (variant) | select | "solid" | Estilo visual de la pista y el relleno. • Opciones: "solid", "subtle". |
Forma del borde (shape) | select | "full" | Redondeo de esquinas de las barras lineales. • Opciones: "square", "rounded", "full". |
Pista con franjas (striped) | boolean | false | Renderiza un patrón diagonal de franjas en barras lineales. |
Tema de color (colorPalette) | select | "blue" | Paleta de tema del relleno de progreso. • Opciones: blue, green, red, purple, orange, amber, cyan, slate. |
Escala de tamaño (size) | select | "md" | Controla la altura o el radio circular. • Opciones: "xs", "sm", "md", "lg", "xl". |
Developer Notes & Accessibility
- Sin hidratación (solo estático): El componente Progress opera puramente mediante enlaces de diseño y animaciones CSS estándar, siendo una componente estática (Tier 3) sin JavaScript del lado del cliente.
- Cumplimiento WAI-ARIA: Internamente compila a envoltorios semánticos de progreso (
role="progressbar",aria-valuenow,aria-valuemin,aria-valuemax). Sivalueno está definido o es nulo, cambia automáticamente a un estado de carga indeterminado.