Loading Animation

by Fiddel

HTML

<div class="bricks loading">
      <div class="brickthumb brickthumb1"></div>
      <div class="brickthumb brickthumb2"></div>
      <div class="brickthumb brickthumb3"></div>
      <div class="brickthumb brickthumb4"></div>
			
      <div class="brickthumb brickthumb5"></div>
      <div class="brickthumb brickthumb6"></div>
      <div class="brickthumb brickthumb7"></div>
      <div class="brickthumb brickthumb8"></div>
			
      <div class="brickthumb brickthumb9"></div>
      <div class="brickthumb brickthumb10"></div>
      <div class="brickthumb brickthumb11"></div>
      <div class="brickthumb brickthumb12"></div>
			
      <div class="brickthumb brickthumb13"></div>
      <div class="brickthumb brickthumb14"></div>
      <div class="brickthumb brickthumb15"></div>
      <div class="brickthumb brickthumb16"></div>
</div>

CSS

body {
	margin:0;
	background:#003d85;
}
div.bricks {position:relative;
width:200px;
height:200px;
margin:2em auto;
border:1px solid #fff}

div.bricks div.brickthumb {
	visibility:hidden;
	width:0;
	height:0;
}
div.bricks.loading div.brickthumb {
	  visibility:visible;
		width: 25%;
    height: 25%;
    background-color: #fff;
    float: left;
    animation: brickthumb 2.8s infinite ease-out
}

div.bricks.loading div.brickthumb1 {
    animation-delay: 0s
}
div.bricks.loading div.brickthumb2 {
    animation-delay: 0.1s
}
div.bricks.loading div.brickthumb3 {
    animation-delay: 0.2s
}
div.bricks.loading div.brickthumb4 
    animation-delay: 0.3s
}


div.bricks.loading div.brickthumb5 {
    animation-delay: 0.4s
}
div.bricks.loading div.brickthumb6 {
    animation-delay: 0.5s
}
div.bricks.loading div.brickthumb7 {
    animation-delay: 0.6s
}
div.bricks.loading div.brickthumb8 {
    animation-delay: 0.7s
}


div.bricks.loading div.brickthumb9 {
    animation-delay: 0.8s;
}
div.bricks.loading div.brickthumb10 {
    animation-delay: 0.9s;
}
div.bricks.loading div.brickthumb11 {
    animation-delay: 1s;
}
div.bricks.loading div.brickthumb12 {
    animation-delay: 1.1s;
}


div.bricks.loading div.brickthumb13 {
    animation-delay: 1.2s;
}
div.bricks.loading div.brickthumb14 {
    animation-delay: 1.3s;
}
div.bricks.loading div.brickthumb15 {
    animation-delay: 1.4s;
}
div.bricks.loading div.brickthumb16 {
    animation-delay: 1.5s;
}





@keyframes brickthumb {
    0%, 66%, 100% {
        transform: scaleX(1);
				background-color: rgba(255,255,255,.9);
    }
    33% {
        transform: scaleX(0);
				background-color: rgba(255,255,255,.05);
    }
}