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...
For further actions, you may consider blocking this person and/or reporting abuse
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%;
}
}
you mean two divs are not necessary here?
yes.
Then am buying that!
Top 👏
Amazing! Really interesting and informative topic.
I'm thinking of implementing this idea in my next project.
Thank You James for your informative tips.
Glad to hear that Al Nahian 👍
My Pleasure <3
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.
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.
Thanks for the suggestion. Will definitely look into that.
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!
Cheers Michael
Fascinating 👌
Good tutorial James! Thanks for sharing this. Would you have an indication to how can I applicate your lazy loading style with vanilla JS?
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?
Very nice! Going to try on a
h2
!Congrats!
Hey, James. This is interesting tip on animation.
Glad you found it useful
Can we implement this Preloader/placeholder on WordPress, can anyone please help?
Como ficaria uma página html5 com este recurso animado, alguém pode escrever? Grato
Here's a simple pen.