Bouncing Dots

Tres puntos dentro de una burbuja laten o suben por turnos para mostrar que alguien o una IA está escribiendo.

Añade un "Typing Indicator" (también llamado typing dots) en [dónde].
Los puntos dentro de una pequeña burbuja de chat deben subir y brillar uno tras otro con un ritmo suave y delicado mientras la otra parte escribe.
Haz que el bucle sea continuo, quita la burbuja en cuanto llegue el mensaje y da a los lectores de pantalla un breve texto de estado en lugar de los puntos.

Unas barras verticales crecen y se encogen desfasadas, como un ecualizador de audio.

Añade una animación de carga "Bar Loader (Equalizer)" (también llamada bars loader o audio bars) en [dónde].
Unas pocas barras verticales deben estirarse y encogerse desfasadas entre sí como un ecualizador de audio, a un ritmo vivo pero regular.
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 letras suben y bajan en secuencia, creando una onda que recorre la palabra.

Añade un efecto "Wavy Text" (también llamado text wave) en [dónde].
Las letras deben subir y bajar una tras otra para que una onda suave y fluida recorra la palabra sin parar.
Haz el bucle sin cortes, que los lectores de pantalla lo lean como una sola palabra y detén la onda si el usuario prefiere movimiento reducido (prefers-reduced-motion).

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.

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

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.