DEV Community

Cover image for Make Animated Content Placeholders with HTML and CSS

Make Animated Content Placeholders with HTML and CSS

James Sinkala on February 06, 2021

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 crea...
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
James Sinkala

Top 👏

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

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, as other shapes would be 100% height/width of the container XD) and just reuse that everywhere.

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

Thanks for the suggestion. Will definitely look into that.

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

Cheers Michael

Collapse
 
obaino82 profile image
Obaino82

Fascinating 👌

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

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
 
arvindsridharan profile image
arvindsridharan

Hey, James. This is interesting tip on animation.

Collapse
 
xinnks profile image
James Sinkala

Glad you found it useful

Collapse
 
moonroy30916646 profile image
The Moon Roy

Can we implement this Preloader/placeholder on WordPress, can anyone please help?

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

Here's a simple pen.