MwaXbB

index.html

<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://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>

MwaXbB.markdown

MwaXbB

A Pen by Aurer on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

html, body {
  height: 100%;
}

body {
  background: #222;
  color: #eee;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  stroke: #03AEFF;
}