<div>
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
div {
  /* Finally, a use for "groove"! */
  border: 24px groove rebeccapurple;

  display: table-cell;
  border-radius: 999px;
  animation: spin 15s linear infinite;
}

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


html, body { height: 100% }

body {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: rebeccapurple;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.