Uma outra técnica para fazer esse loaders ou spinners de carregamento é usar SVG Animado.
Primeiro é preciso deixar claro que vc pode por exemplo ter um SVG onde vc vai animar os seus vetores usando propriedades do CSS como transform
, opacite
, etc, tudo pelo CSS. Ou vc pode animar tudo diretamente dentro do SVG usado as tag nativas dele como <animate>
, <set>
e <animateMotion>
por exemplo.
Aqui temos um exemplo de animação 100% feita com CSS usando @keyframes,
porém animando a propriedade stroke-dashoffset
do SVG.
Repare que eu deixei um Triangulo com a animação, e o outro eu deixe apenas o SVG simples, sem a animação do CSS.
html, body {
background-color: #f3f3f3;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
#triangle {
-webkit-transform-origin: 50% 65%;
transform-origin: 50% 65%;
}
#triangle polygon {
stroke-dasharray: 17;
-webkit-animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
}
@-webkit-keyframes dash {
to {
stroke-dashoffset: 136;
}
}
@keyframes dash {
to {
stroke-dashoffset: 136;
}
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<svg id="triangle" width="100px" height="100px" viewBox="-3 -4 39 39">
<polygon fill="#EFEFEF" stroke="#333333" stroke-width="1" points="16,0 32,32 0,32"></polygon>
</svg>
<svg id="" width="100px" height="100px" viewBox="-3 -4 39 39">
<polygon fill="#EFEFEF" stroke="#333333" stroke-width="1" points="16,0 32,32 0,32"></polygon>
</svg>
Fonte: https://codepen.io/dominickolbe/pen/YXYyvW
Animação Nativa com o SVG
Aqui tem um guia que pode te ajudar caso queira anima tudo diretamente dentro do SVG https://css-tricks.com/guide-svg-animations-smil/
Exemplo de SVG animado nativamente, repare que não tem CSS e tudo foi animado dentro do próprio SVG:
<svg version="1.1" width="320" height="320" viewBox="0 0 320 320" fill="none" stroke="#000" stroke-linecap="round"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="r1">
<animate id="p1" attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s" repeatCount="indefinite"/>
<animate attributeName="stroke-width" values="0;4;4;4;0" dur="6s" repeatCount="indefinite" begin="p1.begin"/>
</path>
<path id="r2">
<animate attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s" repeatCount="indefinite" begin="p1.begin+1s"/>
<animate attributeName="stroke-width" values="0;4;4;4;0" dur="6s" repeatCount="indefinite" begin="p1.begin+1s"/>
</path>
<path id="r3">
<animate attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s" repeatCount="indefinite" begin="p1.begin+2s"/>
<animate attributeName="stroke-width" values="0;4;4;4;0" dur="6s" repeatCount="indefinite" begin="p1.begin+2s"/>
</path>
<path id="r4">
<animate id="p1" attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s" repeatCount="indefinite" begin="p1.begin+3s"/>
<animate attributeName="stroke-width" values="0;4;4;4;0" dur="6s" repeatCount="indefinite" begin="p1.begin+3s"/>
</path>
<path id="r5">
<animate attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s" repeatCount="indefinite" begin="p1.begin+4s"/>
<animate attributeName="stroke-width" values="0;4;4;4;0" dur="6s" repeatCount="indefinite" begin="p1.begin+4s"/>
</path>
<path id="r6">
<animate attributeName="d" values="m160,160l0,0 0,0;m130,110l30,-17 30,17;m130,60l30,-17 30,17;m160,20l0,0 0,0" dur="6s" repeatCount="indefinite" begin="p1.begin+5s"/>
<animate attributeName="stroke-width" values="0;4;4;4;0" dur="6s" repeatCount="indefinite" begin="p1.begin+5s"/>
</path>
</defs>
<use xlink:href="#r1"/>
<use xlink:href="#r1" transform="rotate(60 160 160)"/>
<use xlink:href="#r1" transform="rotate(120 160 160)"/>
<use xlink:href="#r1" transform="rotate(180 160 160)"/>
<use xlink:href="#r1" transform="rotate(240 160 160)"/>
<use xlink:href="#r1" transform="rotate(300 160 160)"/>
<use xlink:href="#r2" transform="rotate(30 160 160)"/>
<use xlink:href="#r2" transform="rotate(90 160 160)"/>
<use xlink:href="#r2" transform="rotate(150 160 160)"/>
<use xlink:href="#r2" transform="rotate(210 160 160)"/>
<use xlink:href="#r2" transform="rotate(270 160 160)"/>
<use xlink:href="#r2" transform="rotate(330 160 160)"/>
<use xlink:href="#r3"/>
<use xlink:href="#r3" transform="rotate(60 160 160)"/>
<use xlink:href="#r3" transform="rotate(120 160 160)"/>
<use xlink:href="#r3" transform="rotate(180 160 160)"/>
<use xlink:href="#r3" transform="rotate(240 160 160)"/>
<use xlink:href="#r3" transform="rotate(300 160 160)"/>
<use xlink:href="#r4" transform="rotate(30 160 160)"/>
<use xlink:href="#r4" transform="rotate(90 160 160)"/>
<use xlink:href="#r4" transform="rotate(150 160 160)"/>
<use xlink:href="#r4" transform="rotate(210 160 160)"/>
<use xlink:href="#r4" transform="rotate(270 160 160)"/>
<use xlink:href="#r4" transform="rotate(330 160 160)"/>
<use xlink:href="#r5"/>
<use xlink:href="#r5" transform="rotate(60 160 160)"/>
<use xlink:href="#r5" transform="rotate(120 160 160)"/>
<use xlink:href="#r5" transform="rotate(180 160 160)"/>
<use xlink:href="#r5" transform="rotate(240 160 160)"/>
<use xlink:href="#r5" transform="rotate(300 160 160)"/>
<use xlink:href="#r6" transform="rotate(30 160 160)"/>
<use xlink:href="#r6" transform="rotate(90 160 160)"/>
<use xlink:href="#r6" transform="rotate(150 160 160)"/>
<use xlink:href="#r6" transform="rotate(210 160 160)"/>
<use xlink:href="#r6" transform="rotate(270 160 160)"/>
<use xlink:href="#r6" transform="rotate(330 160 160)"/>
</svg>
Aqui tem a documentação oficial W3C sobre animação de SVGs https://svgwg.org/specs/animations/
OBS:
Vc não precisa de nenhum recurso extra para animar SVGs mas caso deseje existem softwares e APIs que te ajudam a animar e exportar seu SVG animado! Uma opção de plataforma para animar seu SVG online é o https://www.svgator.com/ ou o https://maxwellito.github.io/vivus-instant/
Existem também Frameworks JS para animar SVGs como o http://snapsvg.io/ ou o https://svgjs.com/animating/ e o mais famoso TweenMax GSAP https://greensock.com/svg-tips