Success Checkmark
También llamado Animated success tick
Un círculo y una marca de verificación se dibujan solos para confirmar que la acción se completó.
Se usa en
Envío de formularios, pago completado
Variantes
- SVG stroke draw
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 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).Animaciones parecidas
Haz clic
Checkbox Check Draw
También llamado Animated checkbox, Checkmark draw
Al marcar la casilla, se dibuja una marca de verificación trazo a trazo en su interior.
Se usa en
Formularios, listas de tareas
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.Line Drawing
También llamado Path Drawing, Stroke Dash Animation, Self-Drawing SVG, DrawSVG, Line Draw, SVG Path Draw, Stroke draw, Checkmark draw
Un trazo SVG parece dibujarse a lo largo de su recorrido al animar el desplazamiento del guion.
Se usa en
Iconos, logotipos e ilustraciones
Añade una animación "Line Drawing" (también llamada path drawing o self-drawing SVG) en [dónde].
Cada trazo debe parecer dibujarse solo con suavidad a lo largo de su recorrido de principio a fin, y un segundo trazo, como una marca de verificación, debe seguir justo después del primero.
Reprodúcela una sola vez al entrar en pantalla en lugar de repetirla, y muestra las líneas ya dibujadas si el usuario prefiere movimiento reducido (prefers-reduced-motion).Haz clic
Copy-to-Clipboard Feedback (copiar al portapapeles)
También llamado Copied state, Copy icon to checkmark
El icono de copiar se transforma en una marca de verificación y la etiqueta muestra Copiado por un momento.
Se usa en
Bloques de código, enlaces para compartir
Añade una animación de copiar al portapapeles (Copy-to-Clipboard Feedback) en [dónde], también llamada copied state o copy icon to checkmark.
Al pulsar el botón de copiar, el icono de copiar debe encogerse rápidamente mientras se dibuja una marca de verificación y la etiqueta cambia a "Copiado"; tras un breve momento, todo vuelve suavemente a su estado inicial.
Mantén el botón del mismo tamaño durante el cambio para que nada se desplace, y anuncia el estado de copiado a los lectores de pantalla.Progress Ring
También llamado Circular progress, Radial progress, Animated Circular Progress Bar
Un arco crece alrededor de un anillo para mostrar el porcentaje completado.
Se usa en
Subidas de archivos, objetivos, temporizadores
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.Más en Micro-interaction
Arrastra
Swipe to Delete
También llamado Swipe actions, Swipe to reveal
Deslizar una fila de la lista hacia un lado muestra botones de acción como eliminar o archivar.
Se usa en
Listas de correo, listas de tareas
Añade una interacción "Swipe to Delete" (también llamada swipe actions o swipe to reveal) en [dónde].
Al arrastrar una fila hacia un lado, debe moverse directamente con el dedo para descubrir detrás botones de acción como archivar y eliminar, deteniéndose cuando se ven por completo, y al soltar se desliza con suavidad a su sitio sin rebote.
Mantén el scroll vertical funcionando mientras se desliza en horizontal, y haz que las mismas acciones sean accesibles con teclado y lector de pantalla sin deslizar.Haz clic
Toggle Switch
También llamado Switch, Switch Thumb Slide
Un botón redondo se desliza por un carril y el color del carril cambia entre apagado y encendido.
Se usa en
Ajustes, modo oscuro
Añade una animación "Toggle Switch" (también llamada switch) en [dónde].
Al activarlo o desactivarlo, el botón redondo debe deslizarse suavemente al otro extremo del carril mientras cambia el color del carril: rápido y nítido, sin rebote.
Que sea un interruptor accesible real (role="switch" con su estado checked) que también funcione con el teclado.A
1
Haz clic
Add to Cart Fly
También llamado Fly to cart, Add-to-cart animation
La imagen del producto se encoge y vuela en arco hasta el icono del carrito.
Se usa en
Comercio electrónico
Añade una animación "Add to Cart Fly" (también llamada fly to cart o add-to-cart animation) en [dónde].
Al pulsar el botón de añadir, una pequeña copia de la imagen del producto debe encogerse mientras vuela en un arco suave y rápido hasta el icono del carrito, y el carrito debe dar un pequeño salto al actualizar su contador.
Reprodúcela una vez por pulsación sin mover la tarjeta original del producto, y omite el vuelo si el usuario prefiere movimiento reducido (prefers-reduced-motion), pero actualiza igualmente el carrito.