JSFiddle - React, Tailwind, and code Playground
by envira
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<div class="loadingicon">
<i class="fa fa-bolt iicon"></i>
</div>
CSS
.loadingicon {
background: #e66346;
background-image: -ms-linear-gradient(top,#f37054 0,#e66346 100%);
background-image: -moz-linear-gradient(top,#f37054 0,#e66346 100%);
background-image: -o-linear-gradient(top,#f37054 0,#e66346 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f37054),color-stop(1,#e66346));
background-image: -webkit-linear-gradient(top,#f37054 0,#e66346 100%);
background-image: linear-gradient(to bottom,#f37054 0,#e66346 100%);
border: 1px solid #c94f33;
display: block;
height: 48px;
left: 50%;
margin: -24px 0 0 -24px;
padding: 0;
position: absolute;
top: 50%;
width: 48px;
z-index: 2;
}
.iicon {
color: #fff;
font-size: 30px;
margin: 9px 0 0 15px;
-webkit-animation: scaling .8s infinite linear;
-moz-animation: scaling .8s infinite linear;
-ms-animation: scaling .8s infinite linear;
-o-animation: scaling .8s infinite linear;
animation: scaling .8s infinite linear;
}
@keyframes "scaling"{0{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1)}50%{-webkit-transform:scale(0.8,0.8);-moz-transform:scale(0.8,0.8);-o-transform:scale(0.8,0.8);-ms-transform:scale(0.8,0.8);transform:scale(0.8,0.8)}100%{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-o-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1)}}@-moz-keyframes scaling{0{-moz-transform:scale(1,1);transform:scale(1,1)}50%{-moz-transform:scale(0.8,0.8);transform:scale(0.8,0.8)}100%{-moz-transform:scale(1,1);transform:scale(1,1)}}@-webkit-keyframes "scaling"{0{-webkit-transform:scale(1,1);transform:scale(1,1)}50%{-webkit-transform:scale(0.8,0.8);transform:scale(0.8,0.8)}100%{-webkit-transform:scale(1,1);transform:scale(1,1)}}@-ms-keyframes...