<div class="container">
<div class="circle">
  <div class="circle">
    <div class="circle">
      <div class="circle">
        <div class="circle">
          <div class="circle">
            <div class="circle">
              <div class="circle">
                <div class="circle">
                  <div class="inner"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
body {
  height:100%;
  width:100%;
  margin:0px;
  position:absolute;
  background:grey;
  overflow:hidden;
}

.container {
  background:grey;
  width:660px;
  height:660px;
  position: relative;
  top: 45%;
  transform: translateY(-45%);
  margin:auto;
}

.circle {
  margin:5px;
  border-top:30px solid black;
  border-right:30px solid grey;
  border-left:30px solid grey;
  border-bottom:30px solid white;
  border-radius:620px;
  animation: spin 20s infinite;
  animation-timing-function: linear;
}

.inner {
  height:30px;
  width:30px;
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.