Spinner 2

by Simon Herteby

HTML

<div class="spinner">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div>
                        
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner, .spinner div {
  border: 2px solid;
  border-color:Orange transparent MediumSpringGreen  transparent;
  border-radius: 50%;
  animation: spin infinite linear 10s;
}

.spinner {
  width: 100px;
  height: 100px;
  position:relative;
  overflow:hidden;
}
.spinner div {
  margin: 2px;
  height: calc(100% - 8px);
}

html{
  height:100%;
}
body{
  background:#20262e;
  height:100%;
  margin:0px;
  display:flex;
  align-items:center;
  justify-content:center;
}