Old school D3 from simpler times

All examples By author By category About

mcanthony

Full window Github gist

MwaXbB

<svg version="1.1" id="loader-1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve" stroke="#000">

<circle class="wave" fill="none" cx="50%" cy="50%" r="25" opacity="0.2" stroke-width="2" />
  <circle class="wave" fill="none" cx="50%" cy="50%" r="25" opacity="1.0" stroke-width="2" stroke-linecap="round" style="stroke-dasharray: 40, 120;">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="-60 30 30" to="300 30 30" dur="2s" values="-60 30 30;-60 30 30;300 30 30;300 30 30" keyTimes="0;0.1;0.7;1" keySplines="0.0 0.3 0.2 1; 0.0 0.3 0.2 1; 0.0 0.3 0.2 1;" 0
    calcMode="spline" repeatCount="indefinite" />
  </circle>

<circle class="wave" fill="none" cx="50%" cy="50%" r="19" opacity="0.2" stroke-width="2" />
  <circle class="wave" fill="none" cx="50%" cy="50%" r="19" opacity="1.0" stroke-width="2" stroke-linecap="round" style="stroke-dasharray: 30, 100;">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="-30 30 30" to="330 30 30" dur="2s" begin="0.1" values="-60 30 30;-60 30 30;300 30 30;300 30 30" keyTimes="0;0.1;0.6;1" keySplines="0.2 0.3 0.3 1; 0.2 0.3 0.3 1; 0.2 0.3 0.3 1;"
    calcMode="spline" repeatCount="indefinite" />
  </circle>

<circle class="wave" fill="none" cx="50%" cy="50%" r="13" opacity="0.2" stroke-width="2" />
  <circle class="wave" fill="none" cx="50%" cy="50%" r="13" opacity="1.0" stroke-width="2" stroke-linecap="round" style="stroke-dasharray: 20, 100;">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 30 30" to="360 30 30" dur="2s" begin="0.2" values="-60 30 30;-60 30 30;300 30 30;300 30 30" keyTimes="0;0.1;0.6;1" keySplines="0.4 0.3 0.4 1; 0.4 0.3 0.4 1; 0.4 0.3 0.4 1;"
    calcMode="spline" repeatCount="indefinite" />
    </path>
  </circle>
</svg>