Button Loading State

Un anillo o arco gira sin parar para indicar que algo está cargando.

Añade un "Circular Spinner" (también llamado spinner o throbber) en [dónde].
Un arco debe girar a ritmo constante alrededor de un anillo tenue mientras se alarga y se acorta, suave y continuo.
Haz que el giro sea continuo, dale una etiqueta de carga para lectores de pantalla y ralentízalo o detenlo si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El icono de copiar se transforma en una marca de verificación y la etiqueta muestra Copiado por un momento.

Añade una animación de copiar al portapapeles (Copy-to-Clipboard Feedback) en [dónde], también llamada copied state o copy icon to checkmark.
Al pulsar el botón de copiar, el icono de copiar debe encogerse rápidamente mientras se dibuja una marca de verificación y la etiqueta cambia a "Copiado"; tras un breve momento, todo vuelve suavemente a su estado inicial.
Mantén el botón del mismo tamaño durante el cambio para que nada se desplace, y anuncia el estado de copiado a los lectores de pantalla.

Un círculo y una marca de verificación se dibujan solos para confirmar que la acción se completó.

Añade una animación "Success Checkmark" (también llamada animated success tick) en [dónde].
Un círculo debe dibujarse de un solo trazo suave, luego la marca se dibuja dentro y todo el símbolo da un pequeño salto suave: tranquilo y seguro.
Reprodúcela una vez cuando la acción tenga éxito, acompáñala de un mensaje de texto que los lectores de pantalla puedan anunciar, y muestra el símbolo terminado de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Mantener pulsado un elemento un momento activa acciones extra o un relleno de progreso.

Añade una interacción de pulsación larga (Long Press) (también llamada press and hold o touch and hold) en [dónde].
Mientras se mantiene pulsado, el elemento debe hundirse un poco mientras un relleno de progreso lo recorre a ritmo constante; cuando se completa, rebota de vuelta y abre su menú, y si se suelta antes, se cancela y el relleno se reinicia.
Ofrece a los usuarios de teclado y lector de pantalla otra forma de llegar a las mismas acciones, y evita que la pulsación seleccione texto o abra el menú contextual del navegador.

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.