JSFiddle - React, Tailwind, and code Playground
HTML
<img class="spinner" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAB6ElEQVR4nI2UO0hcURCG7+q6vhAhWqyiqLVgp4F0FnYSSOErxlbBJoWgEjtLFWOnkkpQsApYSDBlRFFMQIikUUHRhSw+UePbvX5/du5yXU3WAx//zNwzc86cc3aDrus63ggEArlINrF982uQbnhPLOL8YwST/Gr4SPJLkq6xw/AKXkDECmchV65v9eQia1AKnTACx1AIR745GeRfPtgJldPQHD6cqQ38WvxVdAb9AYMQxU+3Rc987aeTc6egttdDoBJtJ/gT+zX2KfYftM+XpC5cVHkVmoMdlaPev1jvSwTrmDf71AESj/E9x1rWAscqGoRbnEU+NqINmvtUAd+IwYHwDldnUoLmwx6xsRQFHDvUS/JCkKFO1M4oVGkFgl1M+pyqEPPKLEddRFSkHwog6sSv+Dljx4mfiW7sXGeyYtX1Ht6hX//3Ou1gi5iz6cWCdv9N0OPEH9e3FLvIgxbyltHvFDtSOyFohXno1aNjgvrdxT707aAYiRH7jT1pC99gz6vIFbR5CQT1e5mCN9jnaC3f9I7CtoMP+FvokO3q7zvRvXsFMpE5mCa+YTsaQBfQVaiHtzCh527tP/oBlsMvGDZfV7kNBSSdUGwcuxnV38VF4mCTimxBh2/COuj2TuQQ1w/xkx1BYtwD0aDcaegH9T8AAAAASUVORK5CYII=">
SCSS
body {
background-color: tomato;
}
.spinner {
-webkit-animation: spinner 1s cubic-bezier(0.75, 0.45, 0.45, 0.75) infinite;
-moz-animation: spinner 1s cubic-bezier(0.75, 0.45, 0.45, 0.75) infinite;
-ms-animation: spinner 1s cubic-bezier(0.75, 0.45, 0.45, 0.75) infinite;
-o-animation: spinner 1s cubic-bezier(0.75, 0.45, 0.45, 0.75) infinite;
animation: spinner 1s cubic-bezier(0.75, 0.45, 0.45, 0.75) infinite;
}
@-webkit-keyframes spinner {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
@-moz-keyframes spinner {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(359deg);
}
}
@-ms-keyframes spinner {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(359deg);
}
}
@-o-keyframes spinner {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(359deg);
}
}
@keyframes spinner {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}