<img class="spinner" alt="Loading..." src="https://user-images.githubusercontent.com/35404137/143417657-5068e157-7420-4801-b9f1-eada2fdf74ba.jpg"/>
<img class="multi-step-spinner" alt="Loading..." src="https://user-images.githubusercontent.com/35404137/143417657-5068e157-7420-4801-b9f1-eada2fdf74ba.jpg"/>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
height: calc(100vh - 16px);
}
.spinner, .multi-step-spinner {
display: block;
width: 32px;
height: 32px;
}
@keyframes spin {
0% {
transform: rotate(0turn);
}
100% {
transform: rotate(1turn);
}
}
@keyframes multi-step-spin {
0% {
transform: rotate(0turn);
}
25% {
transform: rotate(0.25turn);
}
50% {
transform: rotate(0.5turn);
}
75% {
transform: rotate(0.75turn);
}
100% {
transform: rotate(1turn);
}
}
.spinner {
animation: spin 2000ms;
animation-iteration-count: infinite;
}
.multi-step-spinner {
animation: multi-step-spin 2000ms;
animation-iteration-count: infinite;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.