Pular para o conteúdo
Toolars
Explorar

Gerador de animações de carregamento CSS

CSS Loader Generator

264 modelos de carregamento: 24 geometrias × 11 movimentos; filtre por categoria e veja a animação.

Processamento local

Detalhes do processamento

Os dados da ferramenta são processados no seu dispositivo.

Esta ferramenta pode baixar recursos. Os serviços de conta são separados.

Informações de privacidade
Reportar erro

Caminho da tarefa / da entrada ao resultado

Como criar um indicador de carregamento em CSS

  1. 01

    Escolha o estilo do indicador

    Estas instruções referem-se à predefinição básica; os modelos da galeria têm formas, cores, marcação e durações próprias: 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. 264 Modelos · 24 Geometria × 11 Movimento · Categoria · Cor

  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

    Estas instruções referem-se à predefinição básica; os modelos da galeria têm formas, cores, marcação e durações próprias: 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

    Estas instruções referem-se à predefinição básica; os modelos da galeria têm formas, cores, marcação e durações próprias: 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

    Estas instruções referem-se à predefinição básica; os modelos da galeria têm formas, cores, marcação e durações próprias: 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. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.

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?
Estas instruções referem-se à predefinição básica; os modelos da galeria têm formas, cores, marcação e durações próprias: 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. 264 modelos de carregamento: 24 geometrias × 11 movimentos; filtre por categoria e veja a animação. O HTML inclui o CSS atual e um exemplo funcional. Os controles nativos aceitam o teclado.
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?
Estas instruções referem-se à predefinição básica; os modelos da galeria têm formas, cores, marcação e durações próprias: 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.

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

24 modelos de caixa: oito marcas × três transições; teste a prévia nativa com clique ou Espaço.

Criar

Gerador de interruptores CSS

CSS Switch Generator

18 modelos de interruptor: seis formas × três transições; teste com clique ou teclado.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

24 formas de recorte, parâmetros e pontos de polígono editáveis; exporte CSS ou uma declaração.

Criar

Gerador de padrões de fundo CSS

CSS Background Pattern Generator

64 padrões de fundo: 16 geometrias × quatro arranjos; ajuste cores e tamanho do mosaico.

Criar