Blur-Up Placeholder
También llamado LQIP, Blur placeholder, Progressive image load
Una versión diminuta y desenfocada de la imagen ocupa su lugar y se vuelve nítida cuando carga la imagen completa.
Se usa en
Imágenes hero, galerías
Prompt
Sustituye [dónde] por la parte de tu página y pega el prompt en tu agente de IA. Cada prompt incluye el nombre de la animación, así la próxima vez puedes pedirla solo por su nombre.
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.Animaciones parecidas
ABCD
Blur In
También llamado Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
El elemento empieza muy desenfocado y se va enfocando, a menudo mientras se desliza o aparece.
Se usa en
Titulares y textos hero que se revelan
Añade una animación de entrada "Blur In" (también llamada text focus in, focus in o blur text reveal) en [dónde].
El contenido debe empezar muy desenfocado y transparente, y luego enfocarse en su sitio: suave y más bien lento, sin desplazamiento.
Reprodúcela una sola vez y muestra el texto nítido de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).Skeleton Shimmer
También llamado Skeleton wave, Shimmer effect, placeholder-wave
Sobre formas grises de marcador de posición pasa un brillo de luz de lado a lado.
Se usa en
Marcadores de posición mientras carga el contenido
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).Pulse Placeholder
También llamado Skeleton pulse, placeholder-glow
Bloques grises de marcador de posición aparecen y se desvanecen suavemente para indicar que algo carga.
Se usa en
Pantallas esqueleto
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).ABCDEFGHIJKL
Desplázate dentro
Progressive Blur
También llamado Gradient blur edge
La intensidad del desenfoque aumenta poco a poco hacia un borde para que el contenido se desvanezca con suavidad.
Se usa en
Bordes de contenedores con scroll, cabeceras
Añade un borde "Progressive Blur" (también llamado gradient blur edge) en [dónde].
El contenido que se desplaza hacia el borde debe volverse cada vez más borroso y suave, aumentando de forma gradual en lugar de cortarse en una línea dura.
Muestra el desenfoque solo en un borde que todavía tenga más contenido detrás y evita que la zona desenfocada bloquee los clics o el scroll.Más en Loading & Progress
Bouncing Dots
También llamado Dots loader, Ellipsis loader, Three-dot loader
Una fila de puntos rebota, se desvanece o cambia de tamaño en secuencia.
Se usa en
Carga en línea, espera en chats
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).Button Loading State
También llamado Spinner button, Loading button, Button spinner, Submit loading state
Un botón reemplaza su texto por un pequeño spinner, o lo añade, mientras se ejecuta una acción.
Se usa en
Envío de formularios, acciones asíncronas
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.Circular Spinner
También llamado Spinner, Throbber, Circular indeterminate
Un anillo o arco gira sin parar para indicar que algo está cargando.
Se usa en
Botones, cargas de página
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).