Componente de barra de progreso para Figma: 50 variantes

Visión General del Componente

El componente de Progreso en Emvi UI comunica el avance de tareas y el estado del sistema mediante indicadores lineales y circulares. Soporta modos determinados (%) e indeterminados (en curso), etiquetas opcionales y estados de éxito/error. Está diseñado para mantener coherencia entre maquetas en Figma y código con Tailwind, alineado con tokens de pista, relleno, etiqueta y movimiento. Úsalo en cargas, instalaciones, procesos en segundo plano y flujos por pasos. Palabras clave: progress bar, progress bar UI, UI progress bar, progress bar UI Figma, circle progress bar UI, bar progression.

Retroalimentación visual sobre la finalización de tareas

Indica el paso actual o el nivel de avance, reserva el progreso medible para datos disponibles y muestra qué viene después. Mantén breves las etiquetas y usa el espaciado o los iconos para reforzar el mensaje sin depender solo del color.

Tipos y Variantes

Variantes comunes:
- Lineal — Determinada (0–100), Indeterminada (barra animada), Buffer (pista secundaria de datos precargados), Segmentada (pasos/hitos).
- Circular — Determinada (arco del trazo según %), Indeterminada (spinner), Con etiqueta centrada (valor o ícono).
- Ubicación de etiqueta — ninguna / inicial / final / superior / dentro de la barra (compacta).
- Validación — éxito, advertencia, error (color + ícono), en pausa. Todas las variantes consideran tema claro/oscuro y usan tokens como progress.track, progress.fill, progress.buffer, progress.label, progress.ring, progress.indeterminate, progress.success, progress.error.

Tamaños, Espaciado y Escala

Escalas SM/MD/LG:
- Alturas lineales: 4–6–8 px (SM/MD/LG) con esquinas en sintonía con inputs/botones.
- Diámetros circulares: 16–24–48 px con trazos de 2–4 px.
- Espacio de etiqueta: 6–8 px entre barra y texto; dentro de la barra usar tipografía fuerte. Mantén objetivos táctiles ≥44×44 px cuando haya controles (p. ej., pausar/cancelar) y ritmo vertical consistente con controles y alertas adyacentes.

Estados y Comportamiento

Las barras determinadas exponen value y min/max (0–100 por defecto). Las indeterminadas ciclan con movimiento sutil; respeta prefers-reduced-motion. Las de buffer muestran una pista secundaria para datos descargados/preprocesados. Usa pausa para tareas detenidas y cambia a éxito/error al finalizar. Evita “saltos” falsos; las transiciones deben ser suaves y veraces. En RTL invierte la dirección del relleno cuando aplique.

Accesibilidad

Usa role="progressbar" con aria-valuemin, aria-valuemax y aria-valuenow en progreso determinado. Proporciona etiqueta accesible (visible o aria-label). Para indeterminado, omite aria-valuenow y anuncia el contexto (“Cargando datos”). Mantén contraste 4.5:1 entre relleno y pista. Evita anuncios continuos; agrúpalos (p. ej., cada 10%). El foco debe permanecer en la tarea salvo que haya controles (pausar/cancelar).

Integración con Figma y Tailwind

Figma: variantes para lineal/circular, determinado/indeterminado, posiciones de etiqueta, tamaños (SM/MD/LG) y resultados (éxito/error). Tokens mapean estilos: progress.track, progress.fill, progress.buffer, progress.label. Auto Layout mantiene gaps; propiedades del componente alternan etiquetas e íconos. Tailwind: compón con relative, rounded-full y animaciones utilitarias; expón variables CSS (--progress-track, --progress-fill) o tokens para sincronizar temas. Incluye utilidades para inversión RTL y fallback de prefers-reduced-motion.

Buenas Prácticas de Implementación

- Prefiere barras determinadas si conoces el total; usa indeterminadas de forma temporal.
- Mantén el movimiento sutil; respeta usuarios con reducción de movimiento.
- Acompaña con etiquetas o ETA cuando aporte valor; evita duplicar información.
- En listados grandes, usa esqueletos y muestra progreso solo donde sea útil.
- Alinea alturas y tipografía con inputs/botones para conservar el ritmo visual.
- Al finalizar, cambia a estado de éxito brevemente o colapsa la barra para reducir ruido.

Aplicación en desarrollo de software y web

En aplicaciones de software y desarrollo web, las barras de progreso se emplean con frecuencia para representar el estado de operaciones como descargas de archivos, instalaciones de software, cargas de datos o cualquier tarea donde el progreso pueda cuantificarse. Esta representación visual mejora la experiencia del usuario al ofrecer transparencia y tranquilidad durante actividades potencialmente largas.

Mejorando la participación del usuario

Al mostrar actualizaciones de progreso en tiempo real, las barras de progreso involucran activamente a los usuarios y mantienen su atención durante la duración de una tarea. El atractivo visual y la naturaleza intuitiva de las barras de progreso las convierten en una herramienta efectiva para mejorar la usabilidad y la satisfacción general con las aplicaciones, asegurando que los usuarios permanezcan informados y empoderados durante sus interacciones.