前端手写loading加载遮罩

最新推荐文章于 2024-05-27 12:41:44 发布
原创最新推荐文章于 2024-05-27 12:41:44 发布 · 456 阅读
1 ·
CC 4.0 BY-SA版权
文章标签：
#js #html #css
本文详细介绍了如何使用HTML和CSS创建一个动态加载动画，包括关键帧动画、旋转效果及淡入淡出过渡，同时展示了如何通过JavaScript控制动画的显示与隐藏。
复制直接使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>loading图</title>
    <style>
        * {
            padding:0;
            margin:0;
        }
        @keyframes loadingFadeDelay {
        0%, 39%, 100% {
            opacity: 0
        }
        40% {
            opacity: 1
        }
        }
        .loading-container {
        position: fixed;
        left:calc(50% - 25px);
        top:calc(50% - 25px);
        width: 25px;
        height: 25px;
        display: none;
        }

        .loading {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        }

        .loading:before {
        display: block;
        content: ' ';
        margin: 0 auto;
        width: 10%;
        height: 30%;
        background: #aaa;
        animation: loadingFadeDelay 1.2s infinite ease-in-out both; 
        }

        .loading-animation1 {
        transform: rotate(0deg);
        }

        .loading-animation2 {
        transform: rotate(30deg);
        }

        .loading-animation3 {
        transform: rotate(60deg);
        }

        .loading-animation4 {
        transform: rotate(90deg);
        }

        .loading-animation5 {
        transform: rotate(120deg);
        }

        .loading-animation6 {
        transform: rotate(150deg);
        }

        .loading-animation7 {
        transform: rotate(180deg);
        }

        .loading-animation8 {
        transform: rotate(210deg);
        }

        .loading-animation9 {
        transform: rotate(240deg);
        }

        .loading-animation10 {
        transform: rotate(270deg);
        }

        .loading-animation11 {
        transform: rotate(300deg);
        }

        .loading-animation12 {
        transform: rotate(330deg);
        }

        .loading-animation2 { transform: rotate(30deg);}
        .loading-animation3 { transform: rotate(60deg); }
        .loading-animation4 { transform: rotate(90deg);}
        .loading-animation5 { transform: rotate(120deg);}
        .loading-animation6 { transform: rotate(150deg);}
        .loading-animation7 { transform: rotate(180deg);}
        .loading-animation8 { transform: rotate(210deg);}
        .loading-animation9 { transform: rotate(240deg);}
        .loading-animation10 { transform: rotate(270deg); }
        .loading-animation11 { transform: rotate(300deg); }
        .loading-animation12 { transform: rotate(330deg); }
        .loading-animation2:before {animation-delay: -1.1s;}
        .loading-animation3:before {animation-delay: -1s;}
        .loading-animation4:before {animation-delay: -0.9s;}
        .loading-animation5:before {animation-delay: -0.8s;}
        .loading-animation6:before {animation-delay: -0.7s;}
        .loading-animation7:before {animation-delay: -0.6s;}
        .loading-animation8:before {animation-delay: -0.5s;}
        .loading-animation9:before {animation-delay: -0.4s;}
        .loading-animation10:before {animation-delay: -0.3s;}
        .loading-animation11:before {animation-delay: -0.2s;}
        .loading-animation12:before {animation-delay: -0.1s;}
        .load-indicator {
            font-size: 16px;
            color: #aaa;
            position: fixed;
            margin-top: 30px;
            margin-left: -15px;
        }

        .span {
            display: inline-block;
            overflow: hidden;
            height: 1em;
            line-height: 1;
            vertical-align: -.25em;

        }

        .span::after {
            display: block;
            white-space: pre-wrap;
            content: "...\A..\A.";
            animation: loading 3s infinite step-start both;
        }

        @keyframes loading {
            33% {
                transform: translate3d(0, -2em, 0);
            }

            66% {
                transform: translate3d(0, -1em, 0);
            }
        }
        .mask {
            position:absolute;
            background:rgba(0,0,0,0.2) no-repeat center center;
            z-index: 9999; 
            opacity: 0.5;
            -moz-opacity:0.5;
        }
        body {
            height: 1024px;
        }
    </style>
</head>
<body>
    <div class='loading-container'>
        <div class='loading loading-animation1'></div>
        <div class='loading loading-animation2'></div>
        <div class='loading loading-animation3'></div>
        <div class='loading loading-animation4'></div>
        <div class='loading loading-animation5'></div>
        <div class='loading loading-animation6'></div>
        <div class='loading loading-animation7'></div>
        <div class='loading loading-animation8'></div>
        <div class='loading loading-animation9'></div>
        <div class='loading loading-animation10'></div>
        <div class='loading loading-animation11'></div>
        <div class='loading loading-animation12'></div>
        <div class="load-indicator">加载中<span class="span"></span></div>
    </div>
    <div id="mask" class="mask"></div>
    <button>测试按钮</button>        
</body>
<script>
    var zhezhao = document.querySelector('.loading-zhezhao')
    var loading = document.querySelector('.loading-container')
    var mask = document.querySelector('#mask')
    var width = document.body.offsetWidth
    var height = window.screen.height
    // dom获取按钮就当成ajax请求
    var btns = document.querySelector('button')
    // 把点击事件看成ajax请求之前，显示遮罩层，请求到数据之后，操作dom元素loading.style.display="none"隐藏遮罩
    btns.onclick = function() {
        loading.style.display = "block"
        mask.style.height = document.body.offsetHeight + 'px'
        mask.style.width = document.body.offsetWidth + 'px'
        mask.style.display = "block"
    }

</script>
</html>