Circular Spinner

El elemento gira sin parar a velocidad constante.

Añade un efecto "Spin" (también llamado spinner o rotate loop) en [dónde].
El elemento debe girar sin parar a una velocidad constante y uniforme, sin easing entre vueltas.
Haz que el bucle no tenga cortes, dale al spinner una etiqueta de carga accesible, y ralentízalo o detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un arco crece alrededor de un anillo para mostrar el porcentaje completado.

Añade un "Progress Ring" (también llamado circular progress o radial progress) en [dónde].
Empezando arriba, un arco debe crecer en el sentido de las agujas del reloj alrededor del anillo para mostrar el porcentaje completado, frenando suavemente al asentarse, mientras el número del centro sube a la par.
Mantén sincronizados el arco y el número, y expón el valor con la semántica correcta de barra de progreso para lectores de pantalla.

Un botón reemplaza su texto por un pequeño spinner, o lo añade, mientras se ejecuta una acción.

Añade un "Button Loading State" (también llamado spinner button o loading button) en [dónde].
Al pulsarlo, el botón debe hundirse un poco, desvanecer su texto y mostrar un pequeño spinner en su lugar mientras se ejecuta la acción; al terminar, el texto vuelve.
Mantén fijo el ancho del botón mientras carga, bloquea las pulsaciones repetidas y anuncia el estado ocupado a los lectores de pantalla.

Arrastrar una lista hacia abajo muestra un indicador de carga y recarga el contenido al soltar.

Añade una interacción "Pull to Refresh" (también llamada swipe to refresh) en [dónde].
Al tirar de la lista hacia abajo desde arriba, debe seguir al dedo con algo de resistencia y mostrar un indicador de carga que gira mientras se tira; al soltar, sigue girando mientras se recarga el contenido y luego la lista vuelve a subir con suavidad.
Actívala solo cuando la lista ya esté en la parte superior, y ofrece también un control de recarga normal para usuarios de teclado y lector de pantalla.

Una barra se llena de izquierda a derecha en proporción al avance de la tarea.

Añade una barra de progreso determinada (Determinate Progress Bar, también llamada progress bar fill o progress indicator) en [dónde].
La barra debe llenarse de izquierda a derecha al ritmo del progreso real, con transiciones suaves entre actualizaciones, y mostrar el porcentaje a su lado.
Usa la semántica correcta de barra de progreso con valores actual, mínimo y máximo para que los lectores de pantalla puedan leerla, y nunca dejes que el relleno retroceda.

Un segmento de barra recorre una y otra vez el carril cuando no se conoce la duración.

Añade una barra de progreso indeterminada (Indeterminate Linear Progress, también llamada indeterminate progress bar) en [dónde].
Un segmento corto debe recorrer el carril de un extremo a otro una y otra vez, rápido y suave, mientras no se sepa cuánto durará la tarea.
Deja que el segmento entre y salga del carril por completo para que el bucle no tenga cortes visibles, y márcalo como barra de progreso ocupada para lectores de pantalla.

Una lista de pasos se resalta o se marca uno a uno a medida que avanza una tarea larga.

Añade un "Multi-Step Loader" (también llamado step loader o checklist loader) en [dónde].
Los pasos deben iluminarse uno a uno de arriba abajo, y cada uno debe recibir una pequeña marca de verificación que aparece con un pequeño salto al completarse, a un ritmo tranquilo y fácil de leer.
Avanza los pasos según el progreso real de la tarea en lugar de un temporizador fijo, y anuncia cada paso completado a los lectores de pantalla.