骨架屏

react组件

import React from "react";
import "./index.scss";
interface ISkeleton {
  className: string;
  children?: any;
}

function Skeleton(props: ISkeleton) {
  return (
    <div className={`skeleton skeleton-animated ${props.className}`}></div>
  );
}

export default Skeleton;

样式文件

.skeleton {
    border-radius: 4px;
    display: block;
}

.skeleton-animated {
    background: linear-gradient(90deg, hsla(0, 0%, 74.5%, .2) 25%, hsla(0, 0%, 50.6%, .24) 37%, hsla(0, 0%, 74.5%, .2) 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}