Gerador de Indicador de Carregamento SVG

O SVG é um formato vetorial, então os giradores permanecem perfeitamente nítidos em qualquer tamanho e em qualquer densidade de pixels. Os tamanhos de arquivo são pequenos (geralmente alguns centenas de bytes), as cores podem ser alteradas via CSS em tempo real, e a animação pode ser pausada, reiniciada ou reestilizada sem reencodar o ativo. Os GIFs, por outro lado, são formatos raster, maiores, com perda de qualidade nas bordas e vinculados às cores e velocidades que foram definidas ao exportar o arquivo.

Um indicador determinado mostra o progresso real em direção a um total conhecido, como uma barra de progresso que preenche de 0% a 100%. Um indicador indeterminado apenas informa ao usuário que um trabalho está em andamento quando a duração ou o progresso não podem ser medidos — por exemplo, enquanto espera uma resposta de rede. A maioria dos giradores (círculos girando, pontos pulsando, ondas) são indeterminados; os carregadores de barra podem ser determinados ou indeterminados, dependendo de se mostram uma fatia se movendo ou uma fração preenchida.

Como diretriz geral de usabilidade, não mostre nenhum indicador para ações que duram menos de cerca de 100 ms — o UI parece instantâneo. Entre 100 ms e 1 segundo, um indicador pequeno e integrado perto do controle afetado é suficiente. Acima de 1 segundo, use um girador claro. Para espera superior a cerca de 10 segundos, mude para um indicador de progresso determinado com uma mensagem significativa, porque os usuários começam a perder confiança de que o sistema ainda está funcionando.

As animações CSS atacam elementos SVG da mesma forma que atacam elementos HTML: você escreve uma regra keyframes e a aplica via a propriedade animation em uma classe. Alvos comuns incluem transformações de rotação para rotações, opacidade para transições e stroke-dashoffset para o efeito de desenho em círculos e linhas. Para que a rotação gire no centro visual de uma forma, defina transform-origin nesse ponto. As animações declaradas dentro de um elemento style dentro do SVG permanecem escopadas ao documento, o que é o motivo pelo qual um SVG autocontido funciona quando colado em qualquer página.

Marque o elemento do girador com role=status (ou role=progressbar para progresso determinado) para que tecnologias assistivas tratem as atualizações como uma região em tempo real. Forneça um rótulo curto e significativo, como Carregando ou Salvando, para que o propósito seja anunciado, e evite depender apenas da cor para transmitir o estado. Para progresso determinado, defina também aria-valuenow, aria-valuemin e aria-valuemax para que o percentual seja anunciado conforme atualiza.