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" />; }