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. **Dica:** Nessa outra resposta tem mais dentalhes sobre o `stroke-dasharray` e `strok-dashoffset` para animar o "contorno" de um elemento HTML https://pt.stackoverflow.com/questions/348883/pintar-parcialmente-a-borda-em-css/348906#348906 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. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-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); } } <!-- language: lang-html --> <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> <!-- end snippet --> *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: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <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> <!-- end snippet --> 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