Hello Readers, here is a small blog on  spinning loader, when we visit any website we have seen loader at the time of loading website. these preloaders are the visual feedback while the content is being loaded. In this example, I have taken  divs having same class "circle-block" and gave them same width and height, position relative, animation-name, animation-duration, animation-timing-function but different animation-delay according to the requirement.

First, we will write the  code to achieve the same:

<div class="container-block">
  <div class="circle-block"></div>
  <div class="circle-block"></div>
  <div class="circle-block"></div>
  <div class="circle-block"></div>
  <div class="circle-block"></div>
  <div class="circle-block"></div>
  <div class="circle-block"></div>
  <div class="circle-block"></div>
  <div class="circle-block"></div>
  <div class="circle-block"></div>
  <div class="circle-block"></div>
  <div class="circle-block"></div>
  <div class="circle-block"></div>
  <div class="circle-block"></div>
  <div class="circle-block"></div>
  <div class="circle-block"></div>
  <div class="circle-block"></div>
  <div class="circle-block"></div>
  <div class="circle-block"></div>
  <div class="circle-block"></div>

</div>

Now we will write the CSS code:

body

{
  background: #fff68f;
}


.container-block

{
  width: 80px;
  height: 100px;
  margin: 100px auto;
  margin-top: calc(100vh / 2 - 50px);

}


.circle-block

{
  position: relative;
  box-sizing: border-box;
  float: left;
  margin: 0 10px 10px 0;
  width: 12px;
  height: 12px;
  background: #ff00a7;
  border-radius:8px;
}


.circle-block:nth-child(4n+1) { animation: wave 2s ease .0s infinite; }
.circle-block:nth-child(4n+2) { animation: wave 2s ease .2s infinite; }
.circle-block:nth-child(4n+3) { animation: wave 2s ease .4s infinite; }
.circle-block:nth-child(4n+4) { animation: wave 2s ease .6s infinite; margin-right: 0; }


@keyframes wave

{
  0%   { top: 0;     opacity: 1; }
  50%  { top: 30px;  opacity: .2; }
  100% { top: 0;     opacity: 1; }
}