Facebook box posts Html y Css

Hace unos momentos se me puso lento la conexión a Internet y note en facebook una carga en los posts box

y lo vi interesante así que decidí codearlo para ustedes.

Codigo Css:

@-webkit-keyframes BgLoading {
 0% {
  background-position: -420px 0px
 } 100% {
  background-position: 420px 0px
 }
}
@keyframes BgLoading {
 0% {
  background-position: 0px 0px
 } 100% {
  background-position: 400px 0px
 }
}

section article {
 border: 1px solid;
 border-color: #e5e6e9 #dfe0e4 #d0d1d5;
 border-radius: 3px;

 width: 400px;
 height: 300px;
 margin-bottom: 10px;
 padding: 10px;
 position: relative;
}
section article i {
 background: linear-gradient(to left, rgba(255, 255, 255, 0), #FFFFFF, rgba(255, 255, 255, 0));
 /*background-size: 200px 26px;*/
 background-repeat: no-repeat;

 position: absolute;
 top: 0px;
 left: 0px;
 right: 0px;
 bottom: 0px;

 -webkit-animation: BgLoading 1s infinite;
 animation:         BgLoading 1s infinite;
}
section article header {
 margin-bottom: 10px;
 overflow: hidden;
}
section article header i {
 background: #0869B0;
 font-family: sans-serif;
 font-style: normal;
 font-weight: bold;
 color: #FFF;
 font-size: 10px;
 line-height: 20px;
 text-align: center;
 border-radius: 50%;
 width: 20px;
 height: 20px;
 position: absolute;
 top: -15px;
 left: 25px;
}
section article header i:after {
 content: "";
 display: inline-block;
 border-top: 8px #0869B0 solid;
 border-left: 7px transparent solid;
 border-right: 7px transparent solid;
 position: absolute;
 left: 3px;
 bottom: -5px;
}
section article header figure {
 background: #7D99B5;
 width: 40px;
 height: 40px;
 margin: 0px;
 margin-right: 10px;
 float: left;
}
section article header h2 {
 background: #7D99B5;
 display: block;
 height: 10px;
 margin: 0px;
 overflow: hidden;
}
section article header b {
 background: #7D99B5;
 display: block;
 width: 300px;
 height: 10px;
 margin: 0px;
 margin-top: 10px;
 overflow: hidden;
}
section article p {
 background: #7D99B5;
 display: block;
 height: 10px;
 margin: 0px;
 margin-bottom: 10px;
 clear: both;
}
section article p:nth-child(odd) {
 width: 90%;
}

Codigo Html:

<section>
 <article>
 <i></i>
 <header>
 <figure></figure>
 <h2></h2>
 <b></b>
 </header>
 <p></p>
 <p></p>
 <p></p>
 <p></p>
 </article>
 <article>
 <header>
 
 <figure><i>10</i></figure>
 <h2></h2>
 <b></b>
 </header>
 <p></p>
 <p></p>
 <p></p>
 <p></p>
 </article>
</section>