.load{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6rem;
   }
   
   .one ,.two ,.three {
       width: 20px;
       height: 20px;
       background-color: rgb(27, 5, 24);
       border-radius: 50%;
       margin: 0 5px;
   
       animation: up-and-down;
       animation-duration: 0.9s;
       animation-iteration-count:infinite;
       animation-direction: alternate;
   }
   
   .load .two{
       animation-delay: 0.3s;/*ينتظروقت الانتظار مقارنة مع الأول*/
   }
   
   .load .three {
       animation-delay: 0.6s;
   }
   
   @keyframes up-and-down {
     
       to{
          opacity: 0.2;
          transform: translateY(-10px);
       }
   }