.loading ul{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  padding:0;
  display:flex;
  
}

.loading ul li
{
  list-style:none;
  width:40px;
  height:40px;
  background:#fff;
  border-radius:50%;
  animation:grow 1.6s ease-in-out infinite;
}
  @keyframes grow
  {
    0% , 40% , 100%
    {
      transform:scale(0.2);
    }
    20%{
       transform:scale(0.5);

    }
  }

.loading ul li:nth-child(1){
  animation-delay:-1.4s;
  background: var(--terahard-color);
  box-shadow:0 0 50px var(--terahard-color);
  
}
.loading ul li:nth-child(2){
  animation-delay:-1.2s;
  background: var(--terahard-color);
  box-shadow:0 0 50px var(--terahard-color);
  
}
.loading ul li:nth-child(3){
  animation-delay:-1s;
  background: var(--terahard-color);
  box-shadow:0 0 50px var(--terahard-color);
  
}
.loading ul li:nth-child(4){
  animation-delay:-0.8s;
  background: var(--terahard-color);
  box-shadow:0 0 50px var(--terahard-color);
  
}
.loading ul li:nth-child(5){
  animation-delay:-0.6s;
  background: var(--terahard-color);
  box-shadow:0 0 50px var(--terahard-color);
  
}
.loading ul li:nth-child(6){
  animation-delay:-0.4s;
  background: var(--terahard-color);
  box-shadow:0 0 50px var(--terahard-color);
  
}
.loading ul li:nth-child(7){
  animation-delay:-0.2s;
  background: var(--terahard-color);
  box-shadow:0 0 50px var(--terahard-color);
  
}