Tạo loading nội dung giống Facebook bằng css animation

Tạo hiệu ứng loading nội dung giống Facebook chỉ bằng HTML - CSS animation

HTML

<div class="loading-container">
    <div class="loading">
        <div class="shape1"></div>
        <div class="shape2"></div>
        <div class="shape3"></div>
        <div class="shape4"></div>
        <div class="shape5"></div>
        <div class="shape6"></div>
        <div class="shape7"></div>
        <div class="shape8"></div>
        <div class="shape9"></div>
        <div class="shape10"></div>
        <div class="shape11"></div>
        <div class="shape12"></div>
    </div>
</div>

CSS

.loading-container {
    height: 100px;padding: 10px;
}
.loading {
    animation-duration: 1s;              // thời gian thực hiện 
    animation-fill-mode: forwards;       // sau khi animation hoàn tất, trạng thái của thành phần này trả về cái cuối cùng
    animation-iteration-count: infinite; // số lần lặp lại vô tận
    animation-name: wave;                // gọi tên animation
    animation-timing-function: linear;   // kiểu chuyển động của hiệu ứng
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: wave;
    -webkit-animation-timing-function: linear;
    -moz-animation-duration: 1s;
    -moz-animation-fill-mode: forwards;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: wave;
    -moz-animation-timing-function: linear;
    background: #dddddd;
    background-image: -webkit-gradient(linear, left center, right center, from(#dddddd), color-stop(.2, #f5f5f5), color-stop(.4, #e5e5e5), to(#dddddd));
    background-image: -webkit-linear-gradient(left, #dddddd 0%, #f5f5f5 20%, #e5e5e5 40%, #dddddd 100%);
    background-image: -moz-gradient(linear, left center, right center, from(#dddddd), color-stop(.2, #f5f5f5), color-stop(.4, #e5e5e5), to(#dddddd));
    background-image: -moz-linear-gradient(left, #dddddd 0%, #f5f5f5 20%, #e5e5e5 40%, #dddddd 100%);
    background-repeat: no-repeat;
    background-size: 800px 104px;
    height: 104px;
    position: relative;
}
.reverse-direction .loading {
    -webkit-animation-direction: reverse;-moz-animation-direction: reverse;
}
.loading div {
    background: #fff;height: 6px;left: 0;position: absolute;right: 0;
}
div.shape1 {
    height: 105px;left: 100px;right: auto;top: 0;width: 10px;
}
div.shape2 {
    height: 10px;left: 500px;top: 0;
}
div.shape3 {
    left: 110px;top: 10px;
}
div.shape4 {
    height: 12px;left: 500px;top: 14px;
}
div.shape5 {
    left: 110px;top: 26px;
}
div.shape6 {
    height: 10px;left: 500px;top: 32px;
}
div.shape7 {
    left: 110px;top: 42px;
}
div.shape8 {
    left: 110px;top: 48px;height: 38px;
}
div.shape9 {
    left: 110px;top: 86px;
}
div.shape10 {
    left: 110px;top: 88px;
}
div.shape11 {
    left: 200px;top: 94px;height: 10px;width: 30%;
}
div.shape12 {
    left: 500px;top: 94px;height: 10px
}
@-webkit-keyframes wave {
    0% {background-position: -468px 0;}
    100% {background-position: 468px 0;}
}

@-moz-keyframes wave {
    0% {background-position: -468px 0;}
    100% {background-position: 468px 0;}
}

---

Xem code và demo online
https://codepen.io/gnasen/pen/gbymaq

Xem code và demo online
https://codepen.io/nurulishlah/pen/beEGVE

Tải demo tại đây
https://ufile.io/d9ugkx72