<div class="spinner" aria-label="loading..."></div>
@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.spinner {
animation: spin 1s linear infinite;
}
/* page styles */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
height: 100vh;
}
.spinner {
width: 5rem;
height: 5rem;
border: 0.3rem solid limegreen;
border-top-color: transparent;
border-radius: 999rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.