SVG Spinner Loading

Spinners SVG de loading: animação vetorial para esperas indeterminadas

Um spinner SVG é um indicador de carregamento construído com o elemento <svg>, tipicamente um círculo cuja stroke-dasharray renderiza apenas um arco parcial, animado para girar indefinidamente. Diferente de um GIF, o SVG escala para qualquer tamanho sem pixelar, aceita cores arbitrárias vindas de variáveis CSS e pesa algumas centenas de bytes; diferente de um spinner CSS puro, ele descreve formas que border-radius não consegue — anéis pontilhados, barras de equalizador, traços com gradiente, rosáceas com múltiplos arcos. A estrutura canônica é um viewBox de 50×50 com um círculo de raio 20, desenhado com uma falha para que a rotação seja visível:

<svg viewBox="0 0 50 50" width="32" height="32">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#3b82f6" stroke-width="4"
    stroke-dasharray="50 100" stroke-linecap="round"/>
</svg>

Três maneiras de animar um spinner SVG

A mais barata é CSS externo: aplique animation: spin 1s linear infinite ao SVG, com keyframe girando transform: rotate(360deg) ao redor de transform-origin: center. Animar transform roda no compositor da GPU e nunca trava. O método legado é SMIL via <animateTransform> dentro do SVG — ainda funciona em Chrome/Firefox mas foi deprecado em alguns contextos. O mais flexível é a Web Animations API em JavaScript: el.animate([{rotate:'0deg'},{rotate:'360deg'}], {duration:1000, iterations:Infinity}), que permite pausar, reverter e encadear timelines.

Variantes: anel, pontilhado, barras, pulsando

• Anel clássico — círculo completo com uma falha, girando. Padrão para esperas de até 3 segundos.
• Anel pontilhado — vários circulinhos ao redor do perímetro, cada um fadando em sequência. Estilo Material Design.
• Barras — 8 a 12 retângulos verticais ao redor do centro, cada um com offset próprio de opacidade. Usado pelo spinner do iOS desde 2007.
• Pontos pulsando — três pontos escalando com defasagem de 200 ms. Amigável, comum em indicador de "digitando" em chats.
• Progresso infinito — arco longo que cresce e encolhe enquanto gira. Modo indeterminado do circular progress do Material Design.

Acessibilidade, tamanho e dark mode

Exponha role="progressbar" e aria-label="Carregando" para leitores de tela anunciarem a espera. Envolva sempre o keyframe em @media (prefers-reduced-motion: reduce) e substitua por um glifo estático ou texto — distúrbios vestibulares podem ser disparados por indicadores girando. Escolha tamanhos de 16–24 px ao lado de um botão, 32–48 px em conteúdo inline, 64 px+ para loaders de página inteira. Em dark mode, controle o stroke via variável CSS (stroke: var(--spinner-colour, currentColor)) para acompanhar o tema automaticamente.

Bibliotecas e inspiração

O pacote SVG-Loaders de Sam Herbert (open source, MIT) virou a referência de fato usada por apps na era Bootstrap. O Lottie da Adobe renderiza animações After Effects exportadas como JSON — útil para loaders mais ricos (foguete decolando, checkmark desenhado traço a traço) mas mais pesado que um SVG escrito à mão. Para spinners sem CSS, spin.js e ldrs geram spinners vetoriais com uma chamada de função. Independente da escolha, prefira pelo menos 24 frames por segundo de movimento para suavidade; o olho humano detecta tremor abaixo de ~20 fps.

Perguntas frequentes

SVG ou CSS puro? Se a forma é só um anel, ponto ou barra, CSS é mais curto e evita um nó <svg>. Para paths não-circulares, gradientes no traço ou múltiplos arcos, SVG ganha.

Qual o tamanho ideal? 32–48 px dentro de botão ou card, 64–96 px para overlays de página inteira. Abaixo de 16 px parece um ponto estático.

Posso usar traço com gradiente? Sim — declare um <linearGradient> dentro de <defs> e referencie com stroke="url(#g)". Combine com stroke-linecap="round" para o efeito fade tipo Stripe.

Por que meu spinner engasga? Provavelmente está animando uma propriedade não-compositada ou rodando JavaScript pesado na main thread. Fique em transform e opacity; a GPU mantém o spinner girando mesmo com o resto da página ocupado.