Bar Loader (Equalizer)

Una fila de puntos rebota, se desvanece o cambia de tamaño en secuencia.

Añade "Bouncing Dots" (también llamado dots loader o three-dot loader) en [dónde].
Los puntos deben saltar y aterrizar uno tras otro con un ritmo ligero y elástico, con una breve pausa antes de que la secuencia se repita.
Haz que el bucle sea continuo, dale una etiqueta de estado para lectores de pantalla y detén el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las barras suben desde altura cero hasta sus valores.

Añade un gráfico de barras animado (Bar Chart Grow) en [dónde], también llamado animated bar chart o bar chart entrance.
Cada barra debe subir desde la línea base hasta su valor una tras otra con un escalonado rápido, desacelerando con suavidad al asentarse.
Reprodúcelo una sola vez cuando el gráfico entre en pantalla y muestra el gráfico terminado de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Los elementos del gráfico pasan con suavidad de los valores antiguos a los nuevos cuando cambian los datos o se alterna el conjunto de datos.

Añade un "Chart Data Transition" (también llamado chart update animation) en [dónde].
Cuando cambien los datos, todas las barras deben deslizarse a la vez de su valor anterior al nuevo, de forma suave y sin prisa, en lugar de redibujarse desde cero.
Empieza cada actualización desde los valores que hay en pantalla para que un segundo cambio rápido no salte, y aplica los valores nuevos al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Una versión diminuta y desenfocada de la imagen ocupa su lugar y se vuelve nítida cuando carga la imagen completa.

Añade un efecto de carga de imagen "Blur-Up Placeholder" (también llamado LQIP o blur placeholder) en [dónde].
Una versión diminuta y muy desenfocada de la imagen debe ocupar su espacio de inmediato y, cuando la imagen completa haya cargado, volverse nítida en su lugar con suavidad y bastante rapidez.
Reserva el tamaño exacto de la imagen para que nada se desplace cuando llegue y recorta los bordes desenfocados para que no se salgan del marco.

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.