Pular para o conteúdo
Toolars
Explorar
Reportar erro

Design · utilitário Local

Gerador de animações de carregamento CSS

CSS Loader Generator

Desenhe um carregador de anel orbital ou três pontos com tamanho, traço, velocidade e cores ajustáveis e copie CSS com reduced-motion.

Caminho da tarefa / da entrada ao resultado

Escolha o estilo do indicador

Roda localmente · Nada é enviado

Como Gerador de animações de carregamento CSS funciona, privacidade e ferramentas relacionadas

Caminho da tarefa / da entrada ao resultado

Como criar um indicador de carregamento em CSS

  1. 01

    Escolha o estilo do indicador

    Abra Estilo do indicador e escolha Anel orbital para um clássico anel giratório ou Três pontos para um trio de pontos que quicam. A pré-visualização ao vivo anima a cada mudança que você faz, e cada estilo leva seus próprios @keyframes na exportação.

  2. 02

    Dimensione o quadro e o traço

    Use um quadro de 24–160 px e um traço ou pontos de 2–20 px. O traço do anel deve ser menor que a metade do quadro. Os três pontos precisam caber com pelo menos 2 px entre eles; caso contrário, copiar e baixar ficam desativados. As dimensões exportadas do anel incluem a borda.

  3. 03

    Ajuste velocidade e cores

    Escolha uma Duração do ciclo de 0,2 a 4 segundos em passos de 0,05 s. A Cor ativa colore a borda superior do anel ou o ponto central; a Cor da trilha colore o restante do anel ou os dois pontos externos. Ciclos lentos parecem trabalho tranquilo em segundo plano; os rápidos transmitem urgência.

  4. 04

    Ou comece pelo exemplo

    Pressione Carregar exemplo para aplicar um ousado ajuste de Três pontos — quadro de 72 px, pontos de 12 px e ciclo de 0,75 s em vermelho e amarelo — como ponto de partida. Redefinir sempre volta ao anel orbital padrão.

  5. 05

    Copie ou baixe o CSS

    Pressione Copiar CSS para colocar o conjunto de regras na área de transferência, ou Baixar .css para salvar toolars-loader.css. O painel de saída mostra os bytes exatos que você está exportando, e os dois botões ficam desativados enquanto algum valor não passar na validação.

  6. 06

    Conecte ao seu HTML

    O Anel orbital precisa de um único elemento com a classe .loader; o Três pontos espera três filhos span dentro dele. A exportação inclui um bloco prefers-reduced-motion que interrompe a animação para visitantes sensíveis a movimento.

Fatos da ferramenta

Processamento
No seu navegador
A entrada sai deste dispositivo
Nunca
Retenção
Nada é armazenado
Preço
Grátis

Sua entrada fica no navegador.

Gerador de animações de carregamento CSS usa seu caminho de execução local verificado e não cria um histórico oculto de entradas ou saídas.

Execução local

Roda dentro da aba atual do navegador.

Sem processamento oculto

Os dados ativos da ferramenta nunca viram um registro de documento do Toolars.

Não precisa de conta

Use o fluxo principal sem criar um perfil. Os favoritos sincronizam com sua conta depois que você entra.

Redefinição imediata

Limpe a aba e os dados de trabalho ativos desaparecem.

Quando Gerador de animações de carregamento CSS é útil

Criar um anel orbital laranja

No teste local de 24/09/2026, escolha Anel orbital, quadro de 64 px, traço de 8 px, ciclo de 1,2 s, cor ativa #ff6600 e cor da trilha #dfe3ea. A prévia permanece válida. O CSS .loader exportado define largura e altura de 64px, borda de 8px #dfe3ea, borda superior laranja e toolars-spin 1.2s linear infinite.

Exportar o exemplo de três pontos

Carregar exemplo aplica Três pontos com quadro de 72 px, pontos de 12 px e ciclo de 0,75 s: #f21a10 no centro e #ffd11a nas laterais. O CSS usa gap de 18px e atrasos de -0.25s e -0.5s. No teste local, o texto copiado e o arquivo toolars-loader.css baixado coincidiram em todos os 695 bytes UTF-8.

Corrigir pontos que não cabem

No exemplo de três pontos, reduza o quadro para 24 px e mantenha os pontos em 12 px. A prévia mostra CHECK VALUES e avisa que pontos e espaços precisam caber no quadro. O CSS fica vazio; Copiar CSS e Baixar .css são desativados. Volte a 72 px para recuperar o CSS de 695 bytes e as duas ações.

O que Gerador de animações de carregamento CSS realmente faz

Um painel que atualiza dados a cada poucos segundos precisa de um spinner na paleta da marca; um botão de pagamento quer um estado de ocupado enquanto a transação é confirmada; um protótipo merece algo melhor que o visual padrão do navegador. Definir o quadro, o traço e a cadência visualmente significa que o indicador já está certo antes de uma única linha entrar na folha de estilos — e como o gerador roda inteiramente nesta aba, as cores e os nomes de um produto ainda não lançado nunca saem da máquina. Exportar é um clique quando o movimento parece certo.

Perguntas frequentes

Que HTML o CSS gerado espera?
O Anel orbital funciona com um único elemento com a classe .loader. O Três pontos espera três filhos span dentro de .loader; a folha de estilos escalona os atrasos de animação automaticamente, então o HTML fica trivial e nenhuma classe extra é necessária.
Por que a pré-visualização diz VERIFIQUE OS VALORES?
Use um quadro de 24–160 px e um traço ou pontos de 2–20 px. O traço do anel deve ser menor que a metade do quadro. Os três pontos precisam caber com pelo menos 2 px entre eles; caso contrário, copiar e baixar ficam desativados. As dimensões exportadas do anel incluem a borda.
Como os três pontos ficam sincronizados?
A folha de estilos cuida da coreografia: o span central recebe a Cor ativa, e o segundo e o terceiro recebem atrasos de animação negativos de um terço e dois terços do ciclo, de modo que o salto se escalona uniformemente ao longo do loop.
O indicador respeita as configurações de reduced-motion?
Sim. Toda exportação termina com uma media query para prefers-reduced-motion que desliga a animação — a variante de pontos ainda fica com uma opacidade fixa — então quem pede menos movimento recebe um indicador estático e calmo em vez de um giratório.
Posso ajustar o indicador depois de colá-lo no meu projeto?
Claro; a saída é CSS puro com valores legíveis. Mude os tamanhos em pixels, a duração ou as cores diretamente na sua folha de estilos: os @keyframes também são declarações comuns, então cada parte do indicador continua editável após a exportação.
Minhas configurações são enviadas para algum lugar?
Não. O gerador roda inteiramente dentro da aba atual do navegador, não precisa de conta, e nenhum valor entra em armazenamento, registros, análise ou rede. Pressione Redefinir para voltar aos valores padrão; fechar a aba descarta tudo.

Continuar em Design

Tarefas relacionadas, não um beco sem saída.

Passe para outro espaço de trabalho focado sem voltar ao índice completo.

Gerador de caixas de seleção CSS

CSS Checkbox Generator

Estilize uma caixa de seleção própria com tamanho, borda e cores por estado e copie CSS que mantém um input real acessível por teclado.

Criar

Gerador de interruptores CSS

CSS Switch Generator

Crie um interruptor só de CSS com trilha, botão e cores dos dois estados, e copie o código com foco e reduced-motion tratados.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

Edite vértices arrastando, pelo teclado ou por coordenadas. Quatro formas iniciais e cópia local da declaração clip-path ou do CSS completo.

Criar

Gerador de padrões de fundo CSS

CSS Background Pattern Generator

Componha fundos de pontos, grade ou diagonais só com gradientes CSS — sem arquivo de imagem — com controles de ladrilho, marca e cor.

Criar