.loader{
    width:100%;
    height:300px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
  }
  
  .dot{
    height:40px;
    width:40px;
    border-radius:50%;
  }
  
  .dot:nth-child(1){
    background-color: #BEBEBE;
    /* background-color:red; */
    animation: jump 0.6s 0.5s ease-in infinite
  }
  .dot:nth-child(2){
    background-color: #BEBEBE;
    /* background-color:blue; */
    animation: jump 0.6s 0.7s ease-in infinite
  }
  .dot:nth-child(3){
    /* background-color:orange; */
    background-color: #BEBEBE;
    animation: jump 0.6s 0.9s ease-in infinite
  }
  
  
  @keyframes jump{
    0%{
      transform: translate3D(0,0,0);
      opacity: 0;
    }
      50%{
      transform: translate3D(0,-15px,0);
        opacity: 0.5;
    }
      100%{
      transform: translate3D(0,0,0);
        opacity: 1;
    }
  }