<div class="loading">
<span></span>
</div>
.loading {
margin: 1rem 2rem;
display: flex;
justify-content: center;
}
span {
width: 25px;
height: 25px;
border-radius: 50%;
border-top: 1px solid violet;
border-left: 1px solid cyan;
border-bottom: 1px solid lime;
border-right: 1px solid slateblue;
animation-name: borderRotation;
animation-duration: 2.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
@keyframes borderRotation {
100% {
transform: rotateZ(1400deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.