<svg class="spinner" stroke="currentColor" width="80px" height="80px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(1 1)" stroke-width="5" fill="none" fill-rule="evenodd" stroke-linecap="round">
    <circle cx="23" cy="23" r="18" color="#eee">
    </circle>
    <path d="M41 23a18 18 0 1 0 -30.73 12.73">
      <animateTransform attributeName="transform" type="rotate" from="0 23 23" to="360 23 23" dur="1.5s" repeatCount="indefinite">
      </animateTransform>
    </path>
  </g>
</svg>
.spinner {
  color: #21b82d;
  width: 120px;
  height: 120px;
}

.spinner g {
  stroke-width: 3;
}

.spinner g circle{
  color: #eef0f7;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.