JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div class="loader">
    <div class="loader">
      <div class="loader">
        <div class="loader">
          <div class="loader">
            <div class="loader">
              <div class="loader">
                <div class="loader">
                  <div class="loader">
                    <div class="loader"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div>
  <svg xmlns="http://www.w3.org/2000/svg"
       width="200"
       height="200"
       viewBox="-5 -5 210 210">
      <g transform="rotate(45 100 100)" stroke-width="5px" fill="none" stroke-linecap="square">
          <g>
              <animateTransform attributeName="transform"
                              attributeType="XML"
                              type="rotate"
                              from="0 100 100"
                              to="360 100 100"
                              dur="10s"
                              repeatCount="indefinite" />
              <path d="M 0 100 A 100 100 0 0 0 100 200" stroke="black"></path>
              <path d="M 100 0 A 100 100 0 0 1 200 100" stroke="white"></path>
          </g>
          <g>
              <animateTransform attributeName="transform"
                                  attributeType="XML"
                                  type="rotate"
                                  from="0 100 100"
                                  to="720 100 100"
                                  dur="10s"
                                  repeatCount="indefinite" />
              <path d="M 10 100 A 90 90 0 0 0 100 190" stroke="black"></path>
              <path d="M 100 10 A 90 90 0 0 1 190 100" stroke="white"></path>
          </g>
          <g>
              <animateTransform attributeName="transform"
                                  attributeType="XML"
                                  type="rotate"
                               ...

CSS

body {
  background-color: gray;
}

.loader {
  display: inline-block;
  padding: 5px;
  font-size: 0;
  border-radius: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: transparent white transparent black;
  animation: spin 10s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}