Loading Animation source code

HTML SOURCE CODE

<div class="main">
    <div  class="harry"></div>
    <div class="harry"></div>
    <div class="harry"></div>
    <div class="harry"></div>
    <div class="harry"></div>
    <div class="harry"></div>
</div>

CSS SOURCE CODE

*{
 margin:0px;
 padding:0px
 }
 .main{
  width:100vw;
  height:100vh;
  background: black;
display:flex;
justify-content: center;
align-items: center;
 }
 .harry{
 width:8px;
 height:8px;
 background:yellow;
 margin:2px;
 border-radius:50%;
 animation:harry1 1s  linear  infinite ;
 }
 @keyframes harry1{
    0%     { height:0px;}
    50%   { height:40px;}
    100% {height:0px; }
 }

.harry:nth-child(1){
 background:red;
 animation-delay:.2s;
 }

 .harry:nth-child(2){
 background:Orange;
 animation-delay:.4s;
 }
 .harry:nth-child(3){
 background:yellow;
 animation-delay:.6s;

 }.harry:nth-child(4){
 background: skyblue;
 animation-delay:.8s;
 }
 .harry:nth-child(5){
 background: pink;
 animation-delay:.10s;
 }

 .harry:nth-child(6){
 background: yellowgreen;
 animation-delay:.3s;
 }