html
                 <div id="loading-3">
  <i></i>
  <i></i>
  <i></i>
  <i></i>
</div>
 
            

        
css
                 #loading-3{
    margin-top: 1vh;
    margin-left: 45vw;
    position:relative;
    width: 42px;
    height: 42px;
    animation: loading-3 4s infinite linear;
}
#loading-3 i {
    width:20px;
    height:20px;
    position:absolute;
    background:red;
    display:block;
    animation: loading-3-sub 2s infinite linear;
}
#loading-3 i:nth-child(1){
background:#2ecc71;
 
}
#loading-3 i:nth-child(2){
left:22px;
background:#9b59b6;
    animation-delay: .5s;
 
}
#loading-3 i:nth-child(3){
top:22px;
background:#3498db;
    animation-delay: 1.0s;
}
#loading-3 i:nth-child(4){
top:22px;
left:22px;
background:#f1c40f;
    animation-delay: 1.5s;
}
@keyframes  loading-3 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes  loading-3-sub {
   0% { transform:scale(1); }
   50% { transform:scale(0.5); }
   100% { transform:scale(1); }
}
 
            

            
js