DEV Community

Discussion on: Make Animated Content Placeholders with HTML and CSS

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 Author

Top 👏