Placeholder animation

We’re developing Liga Portugal’s website which loads a lot of data, so we needed to distract users while the content is loading. There was already a solution provided by facebook, slack, and many other applications that show animated placeholders.

George Phillips already had a break down of how Facebook developed their placeholders here: http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html

The logic here is to add a gradient background and animate its position, the trick is to add masks for each element. So you need to add absolute elements on top of the animated element to create the illusion of the photo placeholder and different blocks of text.

<div class="timeline-wrapper">
    <div class="timeline-item">
        <div class="animated-background">
            <div class="background-masker header-top"></div>
            <div class="background-masker header-left"></div>
            <div class="background-masker header-right"></div>
            <div class="background-masker header-bottom"></div>
            <div class="background-masker subheader-left"></div>
            <div class="background-masker subheader-right"></div>
            <div class="background-masker subheader-bottom"></div>
            <div class="background-masker content-top"></div>
            <div class="background-masker content-first-end"></div>
            <div class="background-masker content-second-line"</div>
            <div class="background-masker content-second-end"></div>
            <div class="background-masker content-third-line"></div>
            <div class="background-masker content-third-end"></div>
        </div>
    </div>
</div>

This works great, but I wanted to keep things simple and adding all the masks seemed overwhelming.

So I just opted for an easier way, animate the opacity of each element to create a pulse effect. I added several keyframes so it’s not an abrupt change and a cubic-bezier timing function.

@keyframes placeHolderShimmer{
0%{
 opacity: .5;
}
25%{
 opacity: .15;
}
50% {
 opacity: 1;
}
75% {
 opacity: .15;
}
100% {
  opacity: .5;
 }
}
.placeholder {
    animation: placeHolderShimmer 3s infinite cubic-bezier(.65, .05, .36, 1);
}

And here’s the result

Animated placeholder with pulse effect

It has been a pleasure developing Liga Portugal’s new website: ligaportugal.pt. We’re always trying to find new and better ways to give football fans the best experience, so watch this space because there’s a lot more to come.