[React + CSS3] Create an Animate Content Placeholder for Loading State in React

We will create animated Content Placeholder as React component just like Facebook has when you load the page.

Key points:

1. For each elements on the DOM, you might need to create a placeholder components for that.

2. Different size prop is important

3. CSS animation

.placeholder {
  position: relative;
  overflow: hidden;
}

.placeholder:before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 8%,
    rgba(255, 255, 255, 0) 16%
  );
  animation: scanner 0.9s linear infinite;
  z-index: 1;
}

@keyframes scanner {
  0% {
    transform: translateX(-20%);
  }

  100% {
    transform: translateX(170%);
  }
}

.placeholder__headline {
  height: 22px;
  background-color: var(--placeholder-color);
  margin-bottom: 20px;
}

.placeholder__text {
  height: 16px;
  background-color: var(--placeholder-color);
  margin-bottom: 8px;
}

.placeholder__image {
  border-radius: 50%;
  background-color: var(--placeholder-color);
  height: 100px;
}

.placeholder__text--small {
  width: 25%;
}

.placeholder__text--medium {
  width: 50%;
}

.placeholder__text--large {
  width: 75%;
}

.placeholder__text--block {
  width: 100%;
}

Placeholder.jxs:

import React from "react";
import cx from "classnames";

export default function Placeholder({ children, className }) {
  return <div className={cx(className, "placeholder")}>{children}</div>;
}

import React from "react";

export default function Image() {
  return <div className="placeholder__image" />;
}