Indicadores de progreso y estado

1) Principios

1. Respuesta instantánea (≤ 100 ms). Cualquier acción es inmediatamente confirmada visualmente: pulsando → 'busy '/esqueleto/micro animación.
2. Honestidad y previsibilidad. Los porcentajes reflejan un progreso real, no un «99% eterno». Si la evaluación no es posible, utilice una opción y una explicación no definidas (indeterminate).
3. El contexto junto a la acción. El indicador es donde el usuario mira/actúa (botón, tarjeta, bloque) y no en una esquina lejana.
4. Invisibilización después del éxito. El éxito es un cheque corto/fake y todo. Error: explicación comprensible y repetición segura.
5. Disponibilidad predeterminada. 'role =' progressbar '', 'aria-valuenow', regiones en vivo, contraste ≥ AA.

2) Tipos de indicadores y cuándo utilizarlos

Progreso lineal (determinate/indeterminate). Descarga/importación/exportación, pasos con un volumen comprensible.
Progreso circular (normalmente indeterminate). Operaciones locales cortas en lugares compactos.
Stepper (paso a paso). Etapas consecutivas («Paso 2 de 4»), KYC, procesos maestros.
Skeleton (tapones de esqueleto). Para reemplazar la estructura de contenido en lugar de los giradores; evite el «shimmer» para los usuarios con 'prefers-reduced-motion'.
Etiquetas de estado (success/warning/danger/info). Estado del objeto (En proceso, Rechazado, Terminado).
Banner/tostado de estado. Eventos globales: fuera de línea, error del servidor, sincronización de cola.
Cargador en línea (botón/línea). Operaciones locales: «Guardar»..., «Enviar»....

3) Cierto vs progreso incierto

Detalle: se conoce la cantidad de trabajo → se muestran %/hitos.
Indeterminate: volumen desconocido → «Se está procesando»... + contexto («Normalmente hasta 1-2 min»).
Cambio de estado: puede comenzar con indeterminate → ir a determinate cuando aparezca la evaluación.
ETA con precaución: muestre el rango («~ 30-60 segundos») y evite las «promesas».

4) Colocación y patrones

Local a la acción: botón 'aria-busy', spinner en la fila de la tabla, progreso en la tarjeta.
Encima de la unidad/lista: barra de línea debajo del cabezal de la sección en las operaciones por lotes.
Globalmente: progreso fino superior (route-change), banners del sistema.
Panel Sticky (amb.) : confirmación/progreso de CTA en el muelle inferior.

5) Disponibilidad (A11y)

html
<div role = "progressbar" aria-valuemin =" 0" aria-valuemax =" 100" aria-valuenow =" 42" aria-label = "Load Report "> </div>

Indeterminate: exponer 'role =' progressbar 'sin' aria-valuenow ', añadir texto explicativo a' role = 'status'.
Regiones en vivo: 'aria-live =' polite 'para actualizaciones normales,' assertive '- sólo para críticas.
'aria-busy =' true '' en un contenedor que está bloqueado temporalmente por acciones.
El enfoque no «salta»: cuando cambie de etapa, mueva el enfoque hacia el título del paso del stepper.

6) Copyright y semántica visual

En breve y por caso: «Va la descarga»..., «Tramitamos el pago»....
Añada "lo que sigue": "Listo. Actualizaremos la página automáticamente".
Colores: verde - éxito, naranja - advertencia/atención, rojo - error. Color ≠ único medio de significado: dar icono/texto.

7) Actualizaciones y retrocesos optimistas

Optimista: cambiamos la IU a la vez (por ejemplo, la marca «En favoritos») y confirmamos silenciosamente por el servidor.
En caso de error, retroceso suave + explicación y 'Retry'.
Transacciones críticas (tasa/pago): opcionalmente «optimismo suave» (fijamos «Enviado → Esperamos confirmación»...), pero sin cambiar el estado monetario antes de la confirmación.

8) Colas y tareas de fondo

Muestra la cola: 'n' tareas en procesamiento, tarjetas individuales con progreso.
Dé una pausa/cancelación para operaciones largas, si es posible.
Tratamiento de fondo: etiqueta «En el fondo», tostadas al final, sección «Historial de tareas».

9) Performance y temporizaciones

Primera reacción ≤ 100 ms: aplicar skeleton/inline-busy en lugar de vacío.
Animaciones: 120-180 ms (in), 80-140 ms (out), sólo 'transformación/opacity'.
Procesos largos: actualización de progreso no más de 10-15 veces/sec; agrupe los cambios.

10) Snippets

Progreso local en el botón

html
<button id="export" class="btn" aria-busy="false">Экспорт CSV</button>
<script>
const btn = document. getElementById('export');
btn. addEventListener('click', async () => {
btn. setAttribute('aria-busy','true'); btn. disabled = true;
try {
const r = await fetch('/api/export', { method:'POST' });
if(!r.ok) throw new Error();
//show toast "Export has begun. We will notify upon readiness"
} catch {
//toast with cause and Retry
} finally {
btn. disabled = false; btn. setAttribute('aria-busy','false');
}
});
</script>

Determinate lineal

html
<div class="progress">
<div class="bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div>
</div>
<style>
.progress{height:4px; background:var(--bg-muted); border-radius:999px; overflow:hidden}
.progress. bar{height:100%;width:0%;background:var(--accent); transition:width. 16s}
</style>
<script>
const bar = document. querySelector('.progress. bar');
let n=0; const t=setInterval(()=>{ n=Math. min(100, n+5); bar. style. width=n+'%'; bar. setAttribute('aria-valuenow',n); if(n===100) clearInterval(t); },160);
</script>

Stepper

html
<nav aria-label = "Progress">
<ol class="steps">
<li class = "done "> <span> 1 </span> Data </li>
<li class = "current" aria-current = "step "> <span> 2 </span> Documents </li>
<li> <span> 3 </span> Confirmation </li>
</ol>
</nav>

11) Skeleton correctamente

Utilice el formulario de contenido futuro (tarjetas/líneas), sin un shimmer infinito (o desactive cuando 'prefers-reduced-motion').
Límite de tiempo: si carga> 300-500 ms, skeleton está justificado; con menos retrasos, suficiente «micro-feed».

12) Estado de las etiquetas (estados de objeto)

Ejemplos: Borrador, En proceso, Pendiente de confirmación, Terminado, Rechazado.

Texto corto, iconos/colores de fondo estables, contraste ≥ AA.
Icono' aria-hidden =» true» + etiqueta de texto (para SR).
En el clic - revelamos los detalles o abrimos «Historia».

13) Especificidad de iGaming

• Pulsando CTA → «Enviado»..., con un retraso de> 3 s - «Esperamos confirmación...» (indeterminate).
• Éxito - «Apuesta aceptada» + cheque; error - explicación honesta («período de mercado cerrado/coeficiente cambiado») y seguro Retry.

• Determine por etapas: «Validación del método → Envío → Confirmación PSP».
• Para la salida - etiqueta En el procesamiento, pantalla de estado en el perfil, banda ETA; Push al final.

• Stepper de registro (pasos), progreso a la recompensa (N/puntos), etiqueta de estado «Participa».
• La actualización de tiempo real es ordenada, sin parpadeos, con 'aria-live =' polite '.

• Stepper + etiqueta «En verificación». Muestra lo que ya está aceptado (marca de verificación) y lo que queda.

14) Colores, contraste y texto

Éxito/Info/Warning/Danger: cuatro tonos constantes en el sistema de diseño.
Contraste del texto con el fondo de la insignia ≥ AA.
No utilice el mismo color para «procesar» y «advertir».

15) Métricas

Time-to-First-Feedback (TTFF): desde el clic hasta la primera respuesta visual.
Completion Time por operaciones y drop/abort rate para tareas largas.
Tasa de éxito Retry para operaciones de progreso.
% optimista que ha terminado con éxito (y porcentaje de retrocesos).
Tiempo visible skeleton/spinner (objetivo: lo menos posible).

16) Anti-patrones

Botón «mudo» (no busy/spinner)> 100 ms.
Giradores infinitos sin explicación ni alternativa.
Falsos porcentajes/control deslizante, rondando el 99%.
Restablece el contenido en caso de error sin poder repetir.
Sólo color sin texto/iconos para el estado.
Progreso lejos del lugar de acción (el usuario no ve).

17) Tokens del sistema de diseño (ejemplo)

json
{
"progress": {
"barHeight": 4,
"radius": 999,
"inMs": 160,
"outMs": 120,
"pollHz": 10
},
"status": {
"tones": { "success": "#", "info": "#", "warning": "#", "danger": "#" },
"badge": { "radius": 8, "px": "6 10", "icon": 14 }
},
"skeleton": {
"rowHeight": 16,
"gap": 8,
"reduceMotion": true
},
"a11y": {
"useAriaBusy": true,
"live": "polite",
"contrastAA": true
}
}

css
.badge{display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border-radius:8px; font-size:.875rem}
.badge--success{background:var(--bg-success); color:var(--on-success)}
.skeleton{background:linear-gradient(90deg, var(--sk1), var(--sk2), var(--sk1)); border-radius:8px}
@media (prefers-reduced-motion: reduce){.skeleton{background:var(--sk1)} }

18) Lista de comprobación de QA

Respuesta y honestidad

• TTFF ≤ 100 ms; hay un busy/skeleton local.
• Determinate - real%; indeterminate - con una explicación.

Disponibilidad

• 'role =' progressbar '/' aria-valuenow 'son correctos; regiones en vivo en las actualizaciones.
• Contraste de etiquetas/texto ≥ AA; el color no es el único portador de significado.

Comport

• Optimista con una correcta retracción y explicación.
• Se muestran colas; hay una cancelación/pausa (si corresponde).
• El progreso cerca del lugar de acción, no se superpone a la CTA.

Perf

• Actualizaciones no más de 10-15 veces/sec; animaciones 'transformación/opacity'.
• Skeleton no se burla de shimmer 'om con' reducción-movimiento '.

Textos

• Breve, sin tejargón; «Qué es lo siguiente» después de la finalización.
• Sin «promesas» de tiempo exacto si no está garantizado.

19) Documentación en el sistema de diseño

Компоненты: `ProgressBar`, `ProgressCircle`, `Stepper`, `StatusBadge`, `InlineLoader`, `Skeleton`.
Reglas de selección de tipo, redacción y color para los estados.
Patrones: optimismo, colas, procesamiento de fondo, sincronización fuera de línea.
Do/Don 't-gallery: «eterno spinner», falsos porcentajes, «mudo» CTA vs buen TTFF.

Resumen breve

Los indicadores de progreso y estado deben proporcionar retroalimentación oportuna, honesta y accesible. Colóquelos cerca de la acción, distinga entre ciertos e inciertos avances, respeta a11y y no abuse de las animaciones. En iGaming, esto es especialmente importante para apuestas, pagos, torneos y KYC: un progreso tranquilo y predecible aumenta directamente la confianza y la conversión.