HTML
<div class="container">
<div class="cols">
<div class="col">
<div class="sk_bg big"></div>
<div class="sk_bg small"></div>
<div class="sk_bg small2"></div>
</div>
<div class="col">
<div class="sk_bg big"></div>
<div class="sk_bg small"></div>
<div class="sk_bg small2"></div>
</div>
<div class="col">
<div class="sk_bg big"></div>
<div class="sk_bg small"></div>
<div class="sk_bg small2"></div>
</div>
<div class="col">
<div class="sk_bg big"></div>
<div class="sk_bg small"></div>
<div class="sk_bg small2"></div>
</div>
</div>
<div class="cols">
<div class="col">
<div class="sk_bg big"></div>
<div class="sk_bg small"></div>
<div class="sk_bg small2"></div>
</div>
<div class="col">
<div class="sk_bg big"></div>
<div class="sk_bg small"></div>
<div class="sk_bg small2"></div>
</div>
<div class="col">
<div class="sk_bg big"></div>
<div class="sk_bg small"></div>
<div class="sk_bg small2"></div>
</div>
<div class="col">
<div class="sk_bg big"></div>
<div class="sk_bg small"></div>
<div class="sk_bg small2"></div>
</div>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 1024px;
margin: 50px auto;
text-align: center;
}
.cols {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 30px;
}
.col {
margin: 0 15px;
width: 200px;
}
.sk_bg {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: sk_bg_animation;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%);
background-size: 800px 104px;
position: relative;
width: 100%;
margin-bottom: 10px;
}
.sk_bg.big {
height: 96px;
}
.sk_bg.small {
height: 20px;
}
.sk_bg.small2 {
height: 15px;
}
@keyframes sk_bg_animation{
0%{background-position:-468px 0}
100%{background-position:468px 0}
}
@-webkit-keyframes sk_bg_animation{
0%{background-position:-468px 0}
100%{background-position:468px 0}
}
