CodePen

HTML

            
              <div class="square"></div>
            
          
!
via HTML Inspector

CSS

            
                .square{
	  width: 40px;
	  height: 30px;	
	  background-color:gray;
	  background-image:linear-gradient(0deg, blue, blue);
      background-size:15px 15px;
      background-position:0 0;
      background-repeat:no-repeat;
      
      animation:move 1s steps(1, start) infinite;
	}	

@keyframes move{
		16.6%{
          background-position:0 0;
		}
		33.2%{  
		  background-position:12.5px 0;
		}
		49.8%{
		  background-position:25px 0;
		}
		66.4%{
		  background-position:25px 15px;		
		}
		83%{
		  background-position:12.5px 15px;		
		}
		99%{ 
		  background-position:0 15px;				
		}
	} 
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*
Read more here:

http://css-tricks.com/the-facebook-loading-animation-in-css/
*/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................