DEV Community

loading...
Cover image for Make Animated Content Placeholders with HTML and CSS

Make Animated Content Placeholders with HTML and CSS

xinnks profile image James Sinkala ・3 min read

In the same spirit of my previous article on creating loading animations with web technologies, on this post I'll be demonstrating how one can create content placeholders for their web projects using HTML and CSS.

It's a good practice to let the user know that something is going on in the background such as the retrieval of data from the database by displaying an animation that will later be replaced by the loaded data than having nothing displayed which might give the impression that either the page is broken or has issues especially for users that have a weak connection.

In the wide range of animations that one can choose from within the latest web trends content placeholders seem to be the best of the pile as they display animations that carry a look closest possible to the content to be displayed. They can be positioned to hold the place of different types of data from text paragraphs to content cards as evident on major websites such as youtube, instagram and facebook.

On to creating our animated content placeholder.

The anatomy of the placeholder animation consists of two div blocks, the parent block that acts as the animation's wrapper with a darker background and a child block relatively positioned to the parent spanning the entire height of the parent with a lighter colored gradient background which will be animated infinitely, moving it from out of view from the left side of the parent past it to out of view on the right side of the parent.
below is a demonstration of the animated placeholder.
animated placeholder block

Here is a preview of the anatomy of the placeholder animation:
Anatomy of the placeholder animation

The template of the placeholder animation is as follows.

<div class="load-wraper">
    <div class="activity"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

And the stylesheet to animate the placeholder animation.

.load-wraper{
    position: relative;
    height: 100%;
    width: 100%;
    background-color: rgb(211,211,211);
    z-index: 44;
    overflow: hidden;
    border-radius: 5px;
}
.activity{
    position: absolute;
    left: -45%;
    height: 100%;
    width: 45%;
    background-image: linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
    background-image: -moz-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
    background-image: -webkit-linear-gradient(to left, rgba(251,251,251, .05), rgba(251,251,251, .3), rgba(251,251,251, .6), rgba(251,251,251, .3), rgba(251,251,251, .05));
    animation: loading 1s infinite;
    z-index: 45;
}

@keyframes loading {
    0%{
        left: -45%;
    }
    100%{
        left: 100%;
    }
}
Enter fullscreen mode Exit fullscreen mode

To make the animation smoother make sure the child block (.activity) is as wide as possible, here it's width is 45% of the parent's total width.

At this point the animated placeholder block is complete and that's all on implementing it.

What's left is placing the placeholder within the wireframes of any content card layout blocks to see the animated placeholder in action.

Let's demonstrate an example of this:

  • A card component's animated placeholder. A card component's animated placeholder

The HTML for the the above cards is as follows:

<div class="card">
    <div class="card-image">
        <div class="load-wraper">
            <div class="activity"></div>
        </div>
    </div>
    <div class="card-content">
        <div class="card-text">
            <div class="load-wraper">
                <div class="activity"></div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-image">
        <div class="load-wraper">
            <div class="activity"></div>
        </div>
    </div>
    <div class="card-content">
        <div class="card-avatar">
            <div class="load-wraper circular">
                <div class="activity"></div>
            </div>
        </div>
        <div class="card-avatar-text">
            <div class="load-wraper">
                <div class="activity"></div>
            </div>
        </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Adding the stylesheet to the cards:

.card{
    margin: 20px;
    height: 260px;
    width: 400px;
    position: relative;
    float: left;
}
.card-image{
    height: 200px;
    width: 400px;
    position: relative;
}
.card-content{
    margin-top: 20px;
    min-height: 40px;
    display: flex;
}
.card-avatar{
    width: 40px;
    float: left;
    flex: none;
}
.card-avatar-text{
    margin-left: 20px;
    float: left;
}
.card-content, .card-text, .card-avatar, .card-avatar-text{
    height: 40px;
    position: relative;
}
.card-content, .card-text, .card-avatar-text{
    width: 100%;
}
.circular{
    border-radius: 50%;
}
Enter fullscreen mode Exit fullscreen mode

Go ahead and get creative with animated placeholders in your web projects.

Discussion (22)

pic
Editor guide
Collapse
erichsia7 profile image
EricHsia7

Maybe this method can also.
.div {
width:100px;
height:30px;
background: rgb(227,227,227);
background: linear-gradient(90deg, rgba(227,227,227,1) 0%, rgba(182,182,182,1) 7%, rgba(182,182,182,1) 13%, rgba(227,227,227,1) 25%);
background-size:900%;
background-position: 100% 0%;
animation: animation 1.8s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes animation {
0% {
background-position: 100% 0%;
}
99.99% {
background-position: -30% 0%;
}
100% {
background-position: 100% 0%;
}
}

Collapse
husseinkizz profile image
Hussein Kizz

you mean two divs are not necessary here?

Collapse
erichsia7 profile image
EricHsia7

yes.

Thread Thread
husseinkizz profile image
Hussein Kizz

Then am buying that!

Collapse
xinnks profile image
Collapse
alnahian2003 profile image
Al Nahian

Amazing! Really interesting and informative topic.

I'm thinking of implementing this idea in my next project.
Thank You James for your informative tips.

Collapse
xinnks profile image
James Sinkala Author

Glad to hear that Al Nahian 👍

Collapse
alnahian2003 profile image
Al Nahian

My Pleasure <3

Collapse
pozda profile image
Ivan Pozderac • Edited

This is great, never thought of that as I never really had skeleton loaders.

I just got cool idea for making this with base class and modifier classes for unique shapes (can think only of the circle for now, ass other shapes would be 100% height/width of the container XD) and just reuse that everywhere.

Collapse
localstorage profile image
Michael Hungbo

I think another name for this is 'skeleton loader'?
It's amazing to learn that this can be achieved with so little CSS.
Thanks for sharing!

Collapse
xinnks profile image
James Sinkala Author

Cheers Michael

Collapse
ashnwor profile image
Ashnwor

Thanks for the content!

One problem though. You shouldn't use left in animation since it's not hardware accelerated. You should use transform: translate() instead.

Collapse
xinnks profile image
James Sinkala Author

Thanks for the suggestion. Will definitely look into that.

Collapse
arvindsridharan profile image
arvindsridharan

Hey, James. This is interesting tip on animation.

Collapse
xinnks profile image
James Sinkala Author

Glad you found it useful

Collapse
abequar profile image
Ramires

Good tutorial James! Thanks for sharing this. Would you have an indication to how can I applicate your lazy loading style with vanilla JS?

Collapse
xinnks profile image
James Sinkala Author

Do you mean how one can use Vanilla JS to display the placeholders then replace them with the loaded content or how to implement all this with Vanilla JS only?

Collapse
sique976 profile image
San.d • Edited

Very nice! Going to try on a

h2

!

Congrats!
Collapse
sinhapiyush profile image
Piyush Sinha

Shimmer effect 👌

Collapse
obaino82 profile image
Obaino82

Fascinating 👌

Collapse
tupynamba profile image
Gwyra bebe pimentel

Como ficaria uma página html5 com este recurso animado, alguém pode escrever? Grato

Collapse
xinnks profile image
James Sinkala Author

Here's a simple pen.