<style>
        #show {
          height : 140px;
          width : 150px;
          margin:auto;
          margin-top:45%;
          transform: scale(2,2)
        }
        
        #load {font-family : Arial; text-align : center; padding-top:20px; }
        .t{
             height:30px;
              width:30px;
             float:left;
             background-color:black;
             opacity : 0;
             animation : transform 4s infinite;
             position:absolute;
            }
        #transform{margin-top:30px; width:100%; position:relative; }
        #t1 { left:20px;}
        #t2 {left:60px; animation-delay : 0.5s;}
        #t3 {left:100px; animation-delay : 1s;}
        
        @keyframes transform {
          0% { opacity : 0;}
          20% { opacity : 1;}
          40% { opacity : 0;}
          60% { opacity : 0;}
          80% { opacity : 1;}
          100% { opacity : 0;}
        }

</style>

<div id="show">
    <div id="load">
        loading...
      </div>
  <div id="transform">
      <div class="t" id="t1">&nbsp;</div>
    <div class="t" id="t2"></div>
    <div class="t" id="t3"></div>
</div>