Every day I challenge myself to do some kind of animation with CSS and sometimes I write about how I made it.
Today's Animation
Facebook is updating the look of their website and today I will be trying to replicate their new content loader.
Here's what it looks like.
I really like Facebook's version of a content loader since it just animates through the background color. This means it's hard to notice if the browser blocks and interrupts the animation. Not a big deal. Just a nice touch.
Normally you don't see the animation for long anyway since it disappears as soon as the content loads.
Here's the JSX
function FaceBookLoader() {
return (
<div className="FaceBookLoader">
<Loader />
</div>
);
}
function Loader() {
return (
<div className="LoaderWrapper">
<div className="Circle" />
<div className="LineWrapper">
<div className="LineTop" />
<div className="LineBottom" />
</div>
</div>
);
}
The CSS
:root {
--color: #3e4042;
--animation: colorChange 2s linear both infinite;
}
@keyframes colorChange {
0% {
background-color:#3e4042;
}
50% {
background-color: #262729;
}
100% {
background-color:#3e4042;
}
}
.Circle {
/*...*/
background: var(--color);
animation: var(--animation);
/*...*/
}
.LineTop,
.LineBottom {
/*...*/
animation: var(--animation);
background: var(--color);
animation-delay: .2s;
/*...*/
}
The main takeaway should be the animation of the background color. It's pretty simple. Just animate between the main color and a darker one. Also, I've added an animation delay on the two lines. That way, it flows a little better.
I hope you found it interesting! Thanks for reading!
Top comments (0)