Fancy Loading Animation

by Vikas

HTML

<div id='parent'>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

CSS

body {
  background-color: grey;
}
#parent {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  animation: expand 1s linear infinite;
}

#parent span {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #f00;
  animation: spin 1s linear infinite;
}

#parent span:nth-child(1) {
  top: 0;
  left: 0;
  background-color: green;
 
}

#parent span:nth-child(2) {
  top: 0;
  right: 0;
  background-color: blue;
  
}

#parent span:nth-child(3) {
  bottom: 0;
  left: 0;
  background-color: pink;
 
}

#parent span:nth-child(4) {
  bottom: 0;
  right: 0;
  background-color: black;
  
}


@keyframes expand {
  0% {
     width: 100px;
     height: 100px;
  }
  
  10% {
      width: 100px;
     height: 100px;
  }
  
  50% {
     width: 150px;
     height: 150px;
  }
  
   90% {
     width: 100px;
     height: 100px;
  }
  
   100% {
     width: 100px;
     height: 100px;
  }
}


@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(0deg);
  }
   50% {
    transform: rotate(90deg);
  }
   90% {
    transform: rotate(90deg);
  }
   100% {
    transform: rotate(90deg);
  }
}