仿写vant 组件 showLoadingToast

最新推荐文章于 2024-05-07 17:21:32 发布
贰佰伍拾柒
最新推荐文章于 2024-05-07 17:21:32 发布
阅读量423
点赞数 8
文章标签： css css3 前端
本文链接：https://blog.csdn.net/m0_58133506/article/details/136339933
版权
效果如图所示

完整html代码

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>loading</title>
    <style>
        .container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 3.2rem;
            height: 3.2rem;
            box-sizing: border-box;
            border-radius: 0.21333rem;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loading {
            width: 0.8rem;
            height: 0.8rem;
            position: relative;
        }

        .loading .loading-line {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 0.05333rem;
            height: 25%;
            border-radius: 50%/20%;
            -webkit-animation: loading-fade 0.8s linear infinite;
            animation: loading-fade 0.8s linear infinite;
            -webkit-animation-play-state: paused;
            animation-play-state: paused;
        }

        .loading .loading-line:nth-child(1) {
            -webkit-animation-delay: -1.66667s;
            animation-delay: -1.66667s;
            -webkit-transform: translate(-50%, -50%) rotate(30deg) translate(0, -150%);
            transform: translate(-50%, -50%) rotate(30deg) translate(0, -150%)
        }

        .loading .loading-line:nth-child(2) {
            -webkit-animation-delay: -1.58333s;
            animation-delay: -1.58333s;
            -webkit-transform: translate(-50%, -50%) rotate(60deg) translate(0, -150%);
            transform: translate(-50%, -50%) rotate(60deg) translate(0, -150%)
        }

        .loading .loading-line:nth-child(3) {
            -webkit-animation-delay: -1.5s;
            animation-delay: -1.5s;
            -webkit-transform: translate(-50%, -50%) rotate(90deg) translate(0, -150%);
            transform: translate(-50%, -50%) rotate(90deg) translate(0, -150%)
        }

        .loading .loading-line:nth-child(4) {
            -webkit-animation-delay: -1.41667s;
            animation-delay: -1.41667s;
            -webkit-transform: translate(-50%, -50%) rotate(120deg) translate(0, -150%);
            transform: translate(-50%, -50%) rotate(120deg) translate(0, -150%)
        }

        .loading .loading-line:nth-child(5) {
            -webkit-animation-delay: -1.33333s;
            animation-delay: -1.33333s;
            -webkit-transform: translate(-50%, -50%) rotate(150deg) translate(0, -150%);
            transform: translate(-50%, -50%) rotate(150deg) translate(0, -150%)
        }

        .loading .loading-line:nth-child(6) {
            -webkit-animation-delay: -1.25s;
            animation-delay: -1.25s;
            -webkit-transform: translate(-50%, -50%) rotate(180deg) translate(0, -150%);
            transform: translate(-50%, -50%) rotate(180deg) translate(0, -150%)
        }

        .loading .loading-line:nth-child(7) {
            -webkit-animation-delay: -1.16667s;
            animation-delay: -1.16667s;
            -webkit-transform: translate(-50%, -50%) rotate(210deg) translate(0, -150%);
            transform: translate(-50%, -50%) rotate(210deg) translate(0, -150%)
        }

        .loading .loading-line:nth-child(8) {
            -webkit-animation-delay: -1.08333s;
            animation-delay: -1.08333s;
            -webkit-transform: translate(-50%, -50%) rotate(240deg) translate(0, -150%);
            transform: translate(-50%, -50%) rotate(240deg) translate(0, -150%)
        }

        .loading .loading-line:nth-child(9) {
            -webkit-animation-delay: -1s;
            animation-delay: -1s;
            -webkit-transform: translate(-50%, -50%) rotate(270deg) translate(0, -150%);
            transform: translate(-50%, -50%) rotate(270deg) translate(0, -150%)
        }

        .loading .loading-line:nth-child(10) {
            -webkit-animation-delay: -.91667s;
            animation-delay: -.91667s;
            -webkit-transform: translate(-50%, -50%) rotate(300deg) translate(0, -150%);
            transform: translate(-50%, -50%) rotate(300deg) translate(0, -150%)
        }

        .loading .loading-line:nth-child(11) {
            -webkit-animation-delay: -.83333s;
            animation-delay: -.83333s;
            -webkit-transform: translate(-50%, -50%) rotate(330deg) translate(0, -150%);
            transform: translate(-50%, -50%) rotate(330deg) translate(0, -150%)
        }

        .loading .loading-line:nth-child(12) {
            -webkit-animation-delay: -.75s;
            animation-delay: -.75s;
            -webkit-transform: translate(-50%, -50%) rotate(360deg) translate(0, -150%);
            transform: translate(-50%, -50%) rotate(360deg) translate(0, -150%);
        }

        .loading.animating .loading-line {
            -webkit-animation-play-state: running;
            animation-play-state: running
        }

        .loading.white .loading-line {
            background-color: #fff
        }

        .loading.gray .loading-line {
            background-color: #8c8c8c
        }



        @-webkit-keyframes loading-fade {
            0% {
                opacity: .85
            }

            50% {
                opacity: .25
            }

            100% {
                opacity: .25
            }
        }

        @keyframes loading-fade {
            0% {
                opacity: .85
            }

            50% {
                opacity: .25
            }

            100% {
                opacity: .25
            }
        }
    </style>
</head>

<body>
    <script>
        let hei;
        const fontSizeAuto = function () {
            const size = window.innerWidth / 10;
            document.documentElement.style.fontSize = size + 'px';
        };
        fontSizeAuto()
        window.addEventListener('resize', fontSizeAuto);
    </script>
    <div id="app">
        <div class="container white">
            <div class="loading white animating">
                <div class="loading-line"></div>
                <div class="loading-line"></div>
                <div class="loading-line"></div>
                <div class="loading-line"></div>
                <div class="loading-line"></div>
                <div class="loading-line"></div>
                <div class="loading-line"></div>
                <div class="loading-line"></div>
                <div class="loading-line"></div>
                <div class="loading-line"></div>
                <div class="loading-line"></div>
                <div class="loading-line"></div>
            </div>
        </div>
    </div>
</body>

</html>