Recreating Facebook's Content PlaceHolder

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!