--- title: Recreating Facebook's Content PlaceHolder published: true description: How to recreate a content placeholder animation tags: React, animation, loader, daily animation --- 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. {% codesandbox facebookloader-mckbi %} 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 ```javascript function FaceBookLoader() { return (

); } function Loader() { return (

); } ``` The CSS ```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!

dailyanimation

Recreating Facebook's Content PlaceHolder

Join Our Newsletter. No Spam, Only the good stuff.