Ninguém gosta de esperar que sua página da web carregue, então é claro que queremos facilitar o tempo com animação. Neste post, fornecemos alguns exemplos e códigos de maneiras de fazer isso por meio de animações de carregamento SVG. Dê uma olhada e comece a usá-los em seus projetos hoje!
Aqui estão 10 exemplos diferentes, do simples ao mais complexo.
Animado – Carregador SVG
Uma mudança inteligente de ritmo do círculo giratório, esta animação combina vários círculos girando para frente e para trás.
Animações de carregamento de página SVG
Três das animações de carregamento mais típicas e simples.
Carregador SVG
Aqui está um carregador complexo e muito específico que você pode usar todo ou partes dele para torná-lo seu.
Carregador de SVG animado
Este é um carregador divertido e um tanto hipnotizante com várias partes móveis.
Carregador SVG Elétrico
Muito diferente das animações mais planas, aqui está um anel giratório elétrico.
Animação do carregador CSS3 + SVG
Um lindo avião de desenho animado voando pelas nuvens enquanto a página é carregada.
SVG ∞ loader (sem JS, cross-browser, código mínimo)
Uma animação literalmente infinita.
UXBOX carregador de lápis
Aqui está outra mudança de ritmo da norma – um lápis giratório!
Girador/Carregador SVG
Uma combinação inteligente do carregamento de palavras e um girador de círculo.
Carregador SVG de gradiente animado
Outra animação muito específica que você pode usar como inspiração ou editar para torná-la sua.
Triangle SVG Loader (css puro)
Para nosso último exemplo, temos um carregador triangular simples de linha única.