JSFiddle - React, Tailwind, and code Playground
HTML
<div id="loader">Loading...</div>
CSS
body { font-family: Arial, Helvetica, "Liberation Sans", sans-serif; }
#loader {
background: #ddd;
color: #333;
border-radius: 4px;
padding: 4px;
display: inline-block;
-webkit-box-shadow: 0 0 5px #333;
box-shadow: 0 0 5px #333;
-webkit-border-image: bounce 0.5s infinite ease-in;
-moz-border-image: bounce 0.5s infinite ease-in;
-o-border-image: bounce 0.5s infinite ease-in;
animation: bounce 0.5s infinite ease-in;
}
@-o-keyframes bounce {
from {
margin-left: 0;
}
to {
margin-left: 5px;
}
}
@-ms-keyframes bounce {
from {
margin-left: 0;
}
to {
margin-left: 5px;
}
}
@-moz-keyframes bounce {
from {
margin-left: 0;
}
to {
margin-left: 5px;
}
}
@-webkit-keyframes bounce {
from {
margin-left: 0;
}
to {
margin-left: 5px;
}
}