<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.