Multi-Step Loader

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).

Al marcar la casilla, se dibuja una marca de verificación trazo a trazo en su interior.

Añade una animación "Checkbox Check Draw" (también llamada animated checkbox o checkmark draw) en [dónde].
Al marcar la casilla, debe rellenarse de color y la marca de verificación debe dibujarse sola en un trazo rápido y suave; al desmarcarla, se borra de la misma forma.
Mantenla como una casilla real con su estado marcado, que funcione con el teclado y con un anillo de foco visible.

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.

Bloques grises de marcador de posición aparecen y se desvanecen suavemente para indicar que algo carga.

Añade un "Pulse Placeholder" (también llamado skeleton pulse) en [dónde].
Bloques grises con la forma del contenido que va a llegar deben aclararse y volver despacio, todos juntos, con un ritmo suave y constante.
Ajusta los marcadores a la maquetación real para que nada salte cuando llegue el contenido, y déjalos quietos si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Sobre formas grises de marcador de posición pasa un brillo de luz de lado a lado.

Añade un "Skeleton Shimmer" (también llamado skeleton wave o shimmer effect) en [dónde].
Una franja de luz suave debe cruzar las formas grises de izquierda a derecha y hacer una breve pausa antes de la siguiente pasada: fluido y sin prisa.
Ajusta las formas a la maquetación real para que nada salte cuando cargue el contenido, y muestra marcadores estáticos si el usuario prefiere movimiento reducido (prefers-reduced-motion).