JSFiddle - React, Tailwind, and code Playground
HTML
<div class="loading">
<div class="circle-small"></div>
<div class="circle-medium"></div>
<div class="circle-big"></div>
</div>
CSS
.loading {
width: 388px;
height: 388px;
position: relative;
}
.loading > div {
position: absolute;
}
.circle-small {
background-image: url('https://dl.dropboxusercontent.com/u/64675374/circle/small.png');
width: 162px;
height: 161px;
margin-left: 348px;
margin-top: 348px;
-webkit-animation: myOrbit1 3s linear infinite;
-moz-animation: myOrbit1 3s linear infinite;
-o-animation: myOrbit1 3s linear infinite;
animation: myOrbit1 3s linear infinite;
}
.circle-medium {
background-image: url('https://dl.dropboxusercontent.com/u/64675374/circle/medium.png');
width: 338px;
height: 339px;
margin-left: 260px;
margin-top: 260px;
-webkit-animation: myOrbit2 4s linear infinite;
-moz-animation: myOrbit2 4s linear infinite;
-o-animation: myOrbit2 4s linear infinite;
animation: myOrbit2 4s linear infinite;
}
.circle-big {
background-image: url('https://dl.dropboxusercontent.com/u/64675374/circle/big.png');
width: 518px;
height: 517px;
margin-left: 170px;
margin-top: 170px;
}
@-webkit-keyframes myOrbit1 {
from { -webkit-transform: rotate(0deg) translateX(260px) rotate(0deg); }
to { -webkit-transform: rotate(360deg) translateX(260px) rotate(-360deg); }
}
@-moz-keyframes myOrbit1 {
from { -moz-transform: rotate(0deg) translateX(260px) rotate(0deg); }
to { -moz-transform: rotate(360deg) translateX(260px) rotate(-360deg); }
}
@-o-keyframes myOrbit1 {
from { -o-transform: rotate(0deg) translateX(260px) rotate(0deg); }
to { -o-transform: rotate(360deg) translateX(260px) rotate(-360deg); }
}
@keyframes myOrbit2 {
from { transform: rotate(360deg) translateX(260px) rotate(0deg); }
to { transform: rotate(0deg) translateX(260px) rotate(-360deg); }
}
@-webkit-keyframes myOrbit2 {
from { -webkit-transform: rotate(360deg) translateX(260px) rotate(0deg); }
to { -webkit-transform: rotate(0deg)...