21 iconos · interaction="loop"

Iconos animados en bucle

Estos iconos se reproducen sin parar mientras están en pantalla, así que encajan con estados que duran: algo se está cargando, hay una advertencia activa, una terminal está esperando. Si se prefiere movimiento reducido, se detienen en su primer fotograma y se leen como un icono normal.

Todos los iconos con la interacción “Bucle”

Cómo se comporta

Se reproduce sin parar; se queda en el primer fotograma estático si se prefiere movimiento reducido.

Si se prefiere movimiento reducido, el icono no se reproduce automáticamente y se queda en su primer fotograma estático. El componente de React se encarga de todo esto; tú solo eliges el icono.

Dónde usarlos

Spinners de carga e indicadores de progreso
Estados activos de advertencia y de error
Indicadores de directo y de grabación
Indicaciones para desplazarse hacia abajo en secciones hero
Marcadores que llaman la atención sobre notificaciones nuevas

Por categoría

Alertas · 4
Alert circle, Alert octagon, Alert triangle, Error
Notificaciones · 2
Notification V3, Notification V4
Navegación · 2
More Horizontal, More Vertical
Acciones · 2
Checkmark, Help
Multimedia · 1
Airplay
Desarrollo · 1
Terminal
Carga · 5
Infinity, Loading circular, Loading V2, Loading V3, Loading V4
Otros · 4
Activity, Arrow down, Arrow up, Scroll down

Úsalo en React

Los iconos de esta lista usan esta interacción por defecto, pero cualquier otro icono también puede usarla: pasa la prop interaction.

import UseAnimations from 'react-useanimations';
import settings from 'react-useanimations/lib/settings';

// Settings usa normalmente 'hover'
<UseAnimations animation={settings} interaction="loop" size={32} />

Los bucles se reproducen automáticamente y se pausan cuando quedan fuera de la vista. Ralentiza uno con speed, reprodúcelo una sola vez con loop={false} o déjalo quieto con autoplay={false}:

import infinity from 'react-useanimations/lib/infinity';

<UseAnimations animation={infinity} speed={0.5} />      // a mitad de velocidad
<UseAnimations animation={infinity} loop={false} />     // se reproduce una vez y se detiene
<UseAnimations animation={infinity} autoplay={false} /> // primer fotograma estático

Todas las props están en la documentación. Fuera de React, los iconos son archivos Lottie JSON; en Iconos Lottie verás cómo recrear las interacciones con lottie-web.

Preguntas frecuentes

¿Qué iconos usan la interacción “Bucle”?

21 iconos: Alert circle, Alert octagon, Alert triangle, Error, Notification V3, Notification V4, More Horizontal, More Vertical, Checkmark, Help, Airplay, Terminal, Infinity, Loading circular, Loading V2 y 6 más. Los iconos en bucle suelen usarse para spinners de carga, alertas activas, una campana que suena o una indicación para desplazarse hacia abajo.

¿Qué pasa cuando el usuario prefiere movimiento reducido?

Si se prefiere movimiento reducido, el icono no se reproduce automáticamente y se queda en su primer fotograma estático. El componente de React lee prefers-reduced-motion y se actualiza cuando cambia el ajuste, así que no necesitas escribir código para ello.

¿Cómo cambio la interacción de un icono?

Cada icono reproduce la interacción para la que fue diseñado. Pasa interaction="loop" para dar este comportamiento a cualquier otro icono, u otro valor ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') para cambiarlo. Las props autoplay, loop y speed ajustan la reproducción.