1.Spinning.tsx

import "./Spinning.scss";interface Props {isLoading: boolean;children?: React.ReactNode;
}const Spinning: React.FC<Props> = ({isLoading = true,children
}) => {return <div className={`spinning-wrapper${isLoading ? " loading" : ""}`}>{children}<div className="spinning-mask"><div className="loading-spinner"><span></span><span></span><span></span><span></span><span></span></div></div></div>
};export default Spinning;

2. Spinning.scss

.spinning-wrapper {position: relative;height: 100%;.spinning-mask {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 5;background: #f6f6f6ba;& .loading-spinner {width: 150px;height: 15px;margin: 0 auto;margin-top: 100px;& span {display: inline-block;width: 15px;height: 100%;margin-right: 5px;border-radius: 50%;background: #18beeb8f;position: relative;animation: load 5s ease-in-out infinite;-webkit-animation: load 5s ease-in-out infinite;}@keyframes load {0% {left: -50px;opacity: 0.1;}50% {opacity: 1;}100% {left: 100px;opacity: 0.1;}}@-webkit-keyframes load/*Safari and Chrome*/{0% {left: -50px;opacity: 0.1;}50% {opacity: 1;}100% {left: 100px;opacity: 0.1;}}& span:last-child {margin-right: 0px;}& span:nth-child(1) {-webkit-animation-delay: 0.13s;}& span:nth-child(2) {-webkit-animation-delay: 0.26s;}& span:nth-child(3) {-webkit-animation-delay: 0.39s;}& span:nth-child(4) {-webkit-animation-delay: 0.52s;}& span:nth-child(5) {-webkit-animation-delay: 0.65s;}}}}

3. 调用

<Spinning isLoading={true}><div>Test</div>
</Spinning>

4. 展示