加载中...遮罩层

最新推荐文章于 2024-01-25 14:46:30 发布

@LanCaiSheng

最新推荐文章于 2024-01-25 14:46:30 发布

阅读量376

点赞数

文章标签： css3 css javascript

本文链接：https://blog.youkuaiyun.com/qq_43173759/article/details/124724730

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="D:\Project\HtmlDemo\script\jquery-1.11.0.min.js"></script>
    <link href="D:\Project\HtmlDemo\script\MaskUtils.css" rel="stylesheet" />
</head>
<body>
    <input type="button" onclick="opens()" name="name" value="打开遮罩层" />
</body>
</html>
<script>
    function opens() {
        var searchLoading = MaskUtils();

        //打开自定义遮罩层
        searchLoading.mask();

        //关闭自定义遮罩层
        //setTimeout(function () { searchLoading.unmask() }, 10000)

    }
    function MaskUtils() {
        var $mask, $maskMsg;
        var defMsg = '请稍等...';
        function init() {
            if (!$mask) {
                $mask = $("<div style=\"width:100%;display:none;text-align:center;position:absolute;top:0px;height:100%;font-size: 12px;z-index:1000000000;background: #ffffff7a;\"><div style=\"position:relative;top:45%;width:100%;\"> <div class=\"loadingSearch\" ><div></div><div></div><div></div><div></div></div></div></div>").appendTo("body");
            }
            if (!$maskMsg) {
                $maskMsg = $("<div class=\"datagrid-mask-msg\" style=\"z-index:100001;position: absolute;text-align:center\">" + defMsg + "</div>")
                    .appendTo("body").css({ 'font-size': '12px' });
            }
            $mask.css({ width: "100%", height: "100%" });
            $maskMsg.css({
                width: "100%",
                top: "50%"
            });
        }
        return {
            mask: function (msg) {
                init();
                $mask.show();
                $maskMsg.html(msg || defMsg).show();
            },
            unmask: function () {
                if ($mask) {
                    $mask.hide();
                    $maskMsg.hide();
                }
            }
        }
    }
</script>

css内容

.loadingSearch {
    position: absolute;
    z-index: 9997;
    width: 60px;
    height: 54px;
    left: calc(50% - 30px);
    top: calc(50% - 27px);
    text-align: center;
    overflow: hidden;
}

/*当有loading文字时在图标外再包裹一层*/
.sx-loading__wrapper-large {
    position: absolute;
    width: 200px;
    height: 86px;
    left: calc(50% - 100px);
    top: calc(50% - 43px);
}

.loadingSearch div {
    position: absolute;
    bottom: 0;
    width: 10px;
    height: 54px;
    border-radius: 3px;
}

    .loadingSearch div:nth-child(1) {
        left: 0;
        background-color: #ED4D4D;
        animation: line-grow 0.5s 0s ease alternate infinite;
    }

    .loadingSearch div:nth-child(2) {
        left: 15px;
        background-color: #FFD75B;
        animation: line-grow 0.5s 0.15s ease alternate infinite;
    }

    .loadingSearch div:nth-child(3) {
        left: 30px;
        background-color: #2CBEF1;
        animation: line-grow 0.5s 0.3s ease alternate infinite;
    }

    .loadingSearch div:nth-child(4) {
        left: 45px;
        background-color: #2DF07B;
        animation: line-grow 0.5s 0.4s ease alternate infinite;
    }

@-webkit-keyframes line-grow {
    0% {
        transform: translateY(54px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes line-grow {
    0% {
        transform: translateY(54px);
    }

    100% {
        transform: translateY(0px);
    }
}