Skeleton Shimmer

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

Al pasar el cursor, una franja diagonal de luz recorre el elemento de un lado a otro.

Añade un efecto hover "Shine Sweep" (también llamado sheen, shiny button, shine on hover, glint, shimmer o shimmer button) en [dónde].
Una franja diagonal de luz suave debe recorrer el elemento de izquierda a derecha y repetirse con una breve pausa mientras el cursor sigue encima.
Mantén la franja recortada dentro del elemento, detenla cuando el cursor salga y no la reproduzcas si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Un brillo recorre las letras una y otra vez.

Añade un efecto "Shimmer Text" (también llamado animated shiny text o metallic shimmer text) en [dónde].
Una franja de luz debe recorrer las letras con suavidad de izquierda a derecha y repetirse tras una breve pausa.
Mantén el texto legible bajo el brillo y déjalo quieto si el usuario prefiere movimiento reducido (prefers-reduced-motion).

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 barra fina en la parte superior de la página avanza poco a poco durante la navegación y se completa al cargar.

Añade una "Top Loading Bar" (también llamada page progress bar) en [dónde].
Una barra fina en el borde superior debe avanzar rápido al principio y luego cada vez más despacio mientras carga la página; cuando termine, debe correr hasta el final y desvanecerse.
Nunca dejes que llegue al final antes de que la carga termine de verdad, y evita que tape o desplace el contenido de la página.

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