JSFiddle - React, Tailwind, and code Playground

by Alexander Branchugov

HTML

<svg id="loader__circle_1" class="loader__image" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 230 230" preserveAspectRatio="xMidYMid">
    <g transform="translate(115, 115)" width="0">
      <circle  cx="0" cy="0" r="90" fill="none" stroke="#a0cde2" stroke-width="50" stroke-dasharray="282" transform="rotate(0)">
        <animate attributeType="XML"
                 attributeName="transform"
                 from="rotate(150)" to="rotate(-150)"
                 dur="10s"
                 repeatCount="indefinite"
                 /> 
      </circle>
    </g>
  </svg>

  <svg id="loader__circle_2" class="loader__image" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 230 230" preserveAspectRatio="xMidYMid">
    <g transform="translate(115, 115)" width="0">
      <circle cx="0" cy="0" r="90" fill="none" stroke="#edf2f8" stroke-width="30" stroke-dasharray="150 414 " transform="rotate(240)"></circle>
    </g>
  </svg>

  <svg id="loader__circle_3" class="loader__image" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 230 230" preserveAspectRatio="xMidYMid">
    <g transform="translate(115, 115)" width="0">
      <circle cx="0" cy="0" r="90" fill="none" stroke="#000f42" stroke-width="30" stroke-dasharray="180 385 " transform="rotate(95)"></circle>
    </g>
  </svg>

  <svg id="loader__circle_4" class="loader__image" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 230 230" preserveAspectRatio="xMidYMid">
    <g transform="translate(115, 115)" width="0">
      <circle cx="0" cy="0" r="80.5" fill="none" stroke="#1bb2e7" stroke-width="11" stroke-dasharray="323 183 " transform="rotate(45)"></circle>
    </g>
  </svg>

  <svg id="loader__circle_7" class="loader__image" width="100%" height="100%"...

CSS

svg {
  position: absolute;
  left: 0;
  top: 0;
}