<img class="spinner" alt="Loading..." src="https://user-images.githubusercontent.com/35404137/143417657-5068e157-7420-4801-b9f1-eada2fdf74ba.jpg"/>
@keyframes fancy-spin {
0% {
transform: rotate(0turn) scale(1);
}
25% {
transform: rotate(1turn) scale(1);
}
50% {
transform: rotate(1turn) scale(1.5);
}
75% {
transform: rotate(0turn) scale(1.5);
}
100% {
transform: rotate(0turn) scale(1);
}
}
.spinner {
animation: fancy-spin 2000ms;
animation-iteration-count: infinite;
}
.spinner {
display: block;
width: 32px;
height: 32px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.