Pular para o conteúdo
PT

21 ícones · interaction="loop"

Ícones animados em loop

Estes ícones tocam sem parar enquanto estão na tela, por isso combinam com estados que duram: algo carregando, um aviso ativo, um terminal esperando. Quando o usuário prefere movimento reduzido, eles param no primeiro frame e continuam funcionando como um ícone comum.

Todos os ícones com a interação “Loop”

Como funciona

Toca continuamente; fica no primeiro frame estático quando o usuário prefere movimento reduzido.

Com movimento reduzido, o ícone não inicia sozinho e fica no primeiro frame, estático. O componente React cuida de tudo isso; você só escolhe o ícone.

Onde usar

  • Spinners de carregamento e indicadores de progresso
  • Estados ativos de aviso e de erro
  • Indicadores de ao vivo e de gravação
  • Indicações de rolar para baixo em seções hero
  • Marcadores que chamam a atenção para novas notificações

Por categoria

Use no React

Os ícones listados aqui usam esta interação por padrão. Qualquer outro ícone também pode usá-la: basta passar a prop interaction.

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

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

Os loops começam sozinhos e pausam quando saem da área visível. Deixe um mais lento com speed, toque uma única vez com loop={false} ou mantenha parado com autoplay={false}:

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

<UseAnimations animation={infinity} speed={0.5} />      // metade da velocidade
<UseAnimations animation={infinity} loop={false} />     // toca uma vez e para
<UseAnimations animation={infinity} autoplay={false} /> // primeiro frame, estático

Todas as props estão na documentação. Fora do React, os ícones são arquivos Lottie JSON; a página Ícones Lottie mostra como recriar as interações com lottie-web.

Perguntas frequentes

Quais ícones usam a interação “Loop”?

21 ícones: Alert circle, Alert octagon, Alert triangle, Error, Notification V3, Notification V4, More Horizontal, More Vertical, Checkmark, Help, Airplay, Terminal, Infinity, Loading circular, Loading V2 e mais 6. Ícones em loop costumam aparecer em spinners de carregamento, alertas ativos, um sino tocando ou uma dica de rolar para baixo.

O que acontece quando o usuário prefere movimento reduzido?

Com movimento reduzido, o ícone não inicia sozinho e fica no primeiro frame, estático. O componente React lê prefers-reduced-motion e se atualiza quando a configuração muda, então você não precisa escrever nenhum código para isso.

Como mudo a interação de um ícone?

Cada ícone executa a interação para a qual foi desenhado. Passe interaction="loop" para dar esse comportamento a qualquer outro ícone, ou outro valor ('loop', 'click-toggle', 'click-replay', 'hover', 'hover-loop', 'hover-replay') para trocá-la. As props autoplay, loop e speed ajustam a reprodução.