react实现加载动画

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. 展示