<body>
    <div class='timeline'>
        <div class='animated-bg'>
            <div class='p01'></div>
            <div class='p02'></div>
            <div class='p04'></div>
            <div class='p05'></div>
            <div class='p06'></div>
            <div class='p07'></div>
            <div class='p08'></div>
            <div class='p09'></div>
            <div class='p11'></div>
            <div class='p12'></div>
            <div class='p13'></div>
            <div class='p14'></div>
            <div class='fp15'></div>
        </div>
    </div>
  <!-- no need for the following lines-->
    <div class='fail'>
        <span>
    <img src='https://3.bp.blogspot.com/-LFbwmJJLvv8/WbfbnOQKu8I/AAAAAAAACjA/Ve404J8fqGgE1nr9tTmKgSfsIXZxNuhxwCLcBGAs/s1600/fail.png' width='82px' height='62px'>
    </span>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
body {
    background: #e9ebee;
}
.timeline {
    background: #fff;
    margin: 5px auto;
    border: 1px solid #e9ebee;
    border-radius: 3px;
    max-width: 440px;
    height: 220px;
    padding: 12px 12px 0;
}
.animated-bg {
    height: 104px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(to right, #f6f7f9 0%, #e9ebee 20%, #f6f7f9 40%, #f6f7f9 100%);
    background-size: 800px 104px;
    animation: loading 1s linear infinite forwards
}
@keyframes loading {
    0% {
        background-position-x: -800px;
    }
}
.p01 {
    background-color: transparent;
    border: 8px solid #fff;
    border-radius: 50%;
    height: 40px;
    left: -8px;
    top: -8px;
    position: absolute;
    width: 40px;
}
.p02 {
    height: 48px;
    left: 40px;
    right: auto;
    top: 0;
    background: #ffffff;
    width: 8px;
    position: absolute;
}
.p04 {
    background: #ffffff;
    position: absolute;
    top: 0;
    left: 48px;
    height: 8px;
    right: 0;
}
.p05 {
    background: #ffffff;
    position: absolute;
    top: 8px;
    right: 0;
    left: 136px;
    height: 6px;
}
.p06 {
    background: #ffffff;
    position: absolute;
    height: 13px;
    right: 0;
    left: 48px;
    top: 13px;
}
.p07 {
    background: #ffffff;
    position: absolute;
    top: 26px;
    right: 0;
    left: 100px;
    height: 6px;
}
.p08 {
    background: #ffffff;
    position: absolute;
    height: 10px;
    right: 0;
    left: 48px;
    top: 32px;
}
.p09 {
    height: 20px;
    right: 0;
    left: 0;
    position: absolute;
    background: #fff;
    top: 42px;
}
.p11 {
    position: absolute;
    background: #fff;
    right: 0;
    top: 62px;
    left: 410px;
    height: 6px;
}
.p12 {
    background: #fff;
    position: absolute;
    right: 0;
    left: 0;
    height: 13px;
    top: 68px;
}
.p13 {
    position: absolute;
    background: #fff;
    right: 0;
    top: 81px;
    left: 375px;
    height: 6px;
}
.p14 {
    background: #fff;
    position: absolute;
    right: 0;
    left: 0;
    height: 13px;
    top: 86px;
}
.fp15 {
    position: absolute;
    background: #fff;
    right: 0;
    top: 98px;
    left: 275px;
    height: 6px;
}
/* no need for the following lines */

.fail {
    text-align: center;
    margin: 10px auto 0 auto;
    padding: 12px 12px 0;
    max-width: 440px;
}
.fail img {
    animation: pop .3s cubic-bezier(0.18, 0.89, 0.32, 1.28) 1;
    -webkit-animation: pop .3s cubic-bezier(0.18, 0.89, 0.32, 1.28) 1;
    -moz-animation: pop .3s cubic-bezier(0.18, 0.89, 0.32, 1.28) 1;
    -ms-animation: pop .3s cubic-bezier(0.18, 0.89, 0.32, 1.28) 1;
    -o-animation: pop .3s cubic-bezier(0.18, 0.89, 0.32, 1.28) 1;
    cursor: pointer;
    transition: transform .3s ease-out;
}
@keyframes pop {
    0% {
        transform: scale(0);
        opacity: .3;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.fail img:active,
.fail img:hover {
    transform: scale(.9,.9);
}
.fail span {
    position: relative;
    font-weight: bold;
    display: none;
    font-family: Corbel, sans-serif;
}
.fail span:before {
    position: absolute;
    content: 'Tap to Retry';
    line-height: 18px;
    cursor: pointer;
    height: 100%;
    width: 100%;
    left: 0;
    right: 0;
    font-size: 13px;
    bottom: -36px;
    background: #d8dce0;
    color: rgba(255, 255, 255, 0.91);
    animation: up .4s ease 1;
}
@keyframes up {
    0% {
        opacity: 0
    }
}
.fail span:after {
    content: '';
    position: absolute;
    bottom: -17.88px;
    left: 35.99px;
    right: 0px;
    height: 0;
    width: 0;
    border-width: 0px 5px 5px 5px;
    border-style: solid;
    border-color: transparent transparent #d8dce0 transparent;
    animation: slide .8s ease 1;
}
@keyframes slide {
    0% {
        left: 0%;
        opacity: .5 
    }
}
/*responsive w kda
for both lines and the timeline
*/

@media screen and (max-width: 500px) {
    .p13 {
        left: 310px;
    }
    .fp15 {
        left: 200px;
    }
}
@media screen and (max-width: 320px) {
    .p13 {
        left: 180px;
    }
    .fp15 {
        left: 123px;
    }
}
/*
The Loading animation of Facebook posts, simply made with pure css,
the point is to hide the animated background  with bunch of white lines..
You seriously dont need the following lines*/
$(function () {
  setTimeout (function () {
    $('.fail span').show();
    $(this).click(function (){
   location.reload(false);});
  },4000); 
});
//www.facebook.com/Dani4Real

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.