Facebook post loading example

by Roland Doda

HTML

<!-- 
Author:
http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html

Fiddle was created for
http://stackoverflow.com/questions/32228135/how-to-create-a-facebook-post-animation-using-css/38768897
-->
<div class="timeline-wrapper">
    <div class="timeline-item">
        <div class="animated-background">
        </div>
    </div>
</div>

CSS

.timeline-item {
    background: #fff;
    border: 1px solid;
    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
    border-radius: 3px;
    padding: 12px;

    margin: 0 auto;
    max-width: 420px;
    min-height: 200px;
}
@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

.animated-background {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    height: 96px;
    position: relative;
}

.background-masker {
    background: #fff;
    position: absolute;
}