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