24 loaders de graça pro "pensando" da tua IA

O Circle Loaders tem 24 animações de carregamento em SVG, em preto e branco, desenhadas pro momento em que o agente está lendo, pensando ou buscando. Sem JavaScript e sem instalar nada: você copia do cartão, na versão clara ou escura, e cola no projeto.

Todo produto com IA tem um momento de espera. O agente está lendo o documento, buscando a resposta, pensando no que escrever. E o que aparece pra pessoa, quase sempre, é o mesmo círculo girando de qualquer site, ou três pontinhos piscando.

O Circle Loaders é um site com 24 animações de carregamento circulares, em preto e branco, desenhadas pela designer Domi Kissi. A própria página se apresenta como animações de status de agente, e cada cartão já vem com uma frase de exemplo do lado: agente pensando, lendo o contexto, ouvindo, indexando, escaneando.

O que tem em cada cartão

Cada cartão mostra o loader rodando, o nome dele, do que ele é feito (7 faixas, 16 linhas, 36 fatias, 260 pontos), a duração do ciclo e o texto de status. Em cima ficam dois botões, Escuro e Claro, que copiam o arquivo daquela versão. Embaixo, o código aberto, pra quem quer ver antes de copiar.

Os nomes dos loaders ficam em inglês, porque são o nome do arquivo: Latitude, Radar, Tide, Gooey, Rotor, Helix. Tem o disco fatiado em faixas, o radar varrendo uma grade, a onda enchendo o círculo, as bolas que se fundem, o texto girando em volta, a hélice de DNA.

Por que é fácil de colocar

Cada loader é um SVG animado que se basta: o desenho, a animação e a cor moram no mesmo arquivo. Não tem biblioteca, não tem JavaScript e não tem etapa de build. O site diz que ele roda de três jeitos: numa tag de imagem, como fundo no CSS ou colado direto no código da página.

O botão copia o arquivo exatamente como ele aparece na tela, no tema que você escolher. E cada arquivo tem dois ajustes logo no começo: color, que define a cor do desenho, e --rate, que multiplica todas as durações. Então dá pra deixar o loader na cor da marca e mais rápido ou mais lento sem mexer no resto.

• Grátis e sem conta: não tem cadastro, preço nem versão paga na página
• 24 loaders, cada um em versão clara e escura
• Dois ajustes por arquivo: a cor e a velocidade
• Respeita quem pediu menos movimento nas configurações do celular ou do computador
• Dá pra testar na própria página a velocidade (0.5×, 1× e 2×) e o tamanho (64, 96 e 128 px) antes de copiar

Como eu usaria

Eu escolheria o loader pelo que o agente está fazendo, e não só pela beleza. O Radar pra quando ele está buscando, o Waveform pra quando está ouvindo um áudio, o Latitude pro "pensando" de sempre. O próprio texto de status de cada cartão já dá a pista de onde ele encaixa.

Depois copiaria a versão do tema do produto, clara ou escura, e mandaria pra IA de código com um pedido simples: trocar o carregamento que já existe por esse arquivo, ajustar a cor pra cor da marca e colocar o texto de status do lado, mudando conforme a etapa do agente.

Dá pra ir além e usar um loader diferente em cada etapa: um enquanto o agente lê, outro enquanto ele responde. Como cada um é um arquivo sozinho, sem dependência, trocar um pelo outro é trocar a imagem.

O site é este: circleloaders.dominikakissi.com. A autora está no X como @domi_kissi.