<div class="loader">
   <div class="text">Loading</div>
   <div class="dots">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
   </div>
</div>
body {
   display:flex;
   flex-direction:row;
   justify-content:center;
   align-items:center;
   overflow:hidden;
   
   height:100vh;
   
   font-family:"Roboto", sans-serif;
   .loader {
      display:flex;
      //align-items:baseline;
      
      font-size:2em;
      
      .dots {
         display:flex;
         position: relative;
         top:20px;
         left:-10px;
         
         width:100px;
         
         animation: dots 4s ease infinite 1s;
         div {
            position: relative;
            
            width:10px;
            height:10px;
            margin-right:10px;
            border-radius:100%;
            
            background-color:black;
            &:nth-child(1) {
               width:0px;
               height:0px;
               margin:5px;
               margin-right:15px;
               animation: show-dot 4s ease-out infinite 1s;
            }
            &:nth-child(4) {
               background-color:transparent;
               
               animation: dot-fall-left 4s linear infinite 1s;
               
               &:before {
                  position: absolute;
            
                  width:10px;
                  height:10px;
                  margin-right:10px;
                  border-radius:100%;

                  background-color:black;
                  
                  content: '';
               
                  animation: dot-fall-top 4s cubic-bezier(0.46, 0.02, 0.94, 0.54) infinite 1s;
               }
            }
         }
      }
   }
}

@keyframes dots {
   0% {
      left:-10px;
   }
   20%,100% {
      left:10px;
   }
}

@keyframes show-dot {
   0%,20% {
      width:0px;
      height:0px;
      margin:5px;
      margin-right:15px;
   }
   30%,100% {
      width:10px;
      height:10px;
      margin:0px;
      margin-right:10px;
   }
}

@keyframes dot-fall-left {
   0%, 5% {
      left:0px;
   }
   100% {
      left:200px;
   }
}

@keyframes dot-fall-top {
   0%, 5% {
      top:0px;
   }
   30%,100% {
      top:50vh;
   }
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css
  2. https://fonts.googleapis.com/css?family=Roboto:500

External JavaScript

  1. https://codepen.io/z-/pen/a8e37caf2a04602ea5815e5acedab458.js