JSFiddle - React, Tailwind, and code Playground
HTML
<div class="loader"></div>
CSS
@-moz-keyframes loader {
from {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes loader {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes loader {
from {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader {
from {
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.loader {
width:40px;
height: 40px;
background-image: url("http://sakai-eikaiwa.com/wp-content/plugins/contact-form-7/images/ajax-loader.png");
background-size: 40px 40px;
-moz-animation: loader 0.7s linear 0s infinite;
-webkit-animation: loader 0.7s linear 0s infinite;
-o-animation: loader 0.7s linear 0s infinite;
animation: loader 0.7s linear 0s infinite;
}