Pular para o conteúdo
PT

5 ícones · licença MIT

Ícones animados de carregamento

Spinners e loaders que ficam em loop enquanto algo está em andamento. Coloque um dentro do botão de enviar enquanto a requisição roda, no lugar de um conteúdo que ainda está carregando ou numa splash screen; eles ficam parados quando o usuário prefere movimento reduzido.

Todos os 5 ícones ficam em loop contínuo. Cada um vem como componente React, componente shadcn/ui e animação Lottie JSON (2 deles também como SVGs estáticos), e é gratuito para uso comercial sob a licença MIT.

Todos os ícones de carregamento

Onde usar

  • Botões de enviar aguardando uma requisição
  • Placeholders enquanto uma lista ou um gráfico carrega
  • Indicadores de scroll infinito e de carregar mais
  • Splash screens e transições de rota
  • Progresso de upload e processamento de arquivos

Por interação

  • Ícones animados em loop · 5

    Toca continuamente; fica no primeiro frame estático quando o usuário prefere movimento reduzido. Infinity, Loading circular, Loading V2, Loading V3, Loading V4.

Adicione um ao seu app

Com React, instale o react-useanimations e importe o ícone; ele executa a interação “Loop” sozinho. Todos os ícones desta categoria funcionam do mesmo jeito: troque loading pelo nome que aparece na página do ícone.

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import loading from 'react-useanimations/lib/loading';

<UseAnimations animation={loading} size={32} />

Com o shadcn/ui, a CLI adiciona um componente pronto:

npx shadcn@latest add https://useanimations.com/r/loading.json
import { AnimatedLoading } from '@/components/animations/loading';

<AnimatedLoading size={24} />

Não usa React? Cada ícone é um arquivo Lottie JSON em /icons/<id>.json; veja em Ícones Lottie os players para web, iOS, Android e Flutter.

Perguntas frequentes

Quais ícones animados de carregamento estão incluídos?

5 ícones: Infinity, Loading circular, Loading V2, Loading V3 e Loading V4. Todos são gratuitos para projetos pessoais e comerciais sob a licença MIT, sem exigência de atribuição.

Como uso estes ícones animados de carregamento no React?

Instale o react-useanimations, adicione import loading from 'react-useanimations/lib/loading' e renderize <UseAnimations animation={loading} size={32} />. O ícone executa a interação “Loop” e segue a cor do texto. Se você usa shadcn/ui, rode npx shadcn@latest add https://useanimations.com/r/loading.json.

Posso usar estes ícones animados de carregamento sem React?

Sim. Cada ícone é um arquivo Lottie JSON em https://useanimations.com/icons/<id>.json (por exemplo, https://useanimations.com/icons/loading.json), que pode ser reproduzido com lottie-web, lottie-ios, lottie-android ou o pacote lottie do Flutter; os SVGs estáticos ficam na página de cada ícone (em inglês). Nenhum deles usa expressões, então o build light do lottie-web é suficiente.