Create Facebook Like Loading Animation in jQuery CSS

Do you want to integrate facebook like loading animation as you have seen on whenever you scroll fb timeline it’ll display content box loading animation. 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 don’t need the following lines. you can also integrate same type of animation on your website too by using below script.

Facebook Like Loading Animation

HTML

<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>


CSS

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;
    }
}


JS

$(function () {
  setTimeout (function () {
    $('.fail span').show();
    $(this).click(function (){
   location.reload(false);});
  },4000); 
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by Khairy12. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.