请求时显示加载框

最新推荐文章于 2024-05-31 14:44:29 发布

main_xiaomu

最新推荐文章于 2024-05-31 14:44:29 发布

阅读量46

点赞数

文章标签： css

本文链接：https://blog.csdn.net/main_xiaomu/article/details/132860304

版权

请求时显示加载框

css

其实最主要的还是css部分，要能用css把加载图画出来

.wrapp_loading {
    position: fixed;
    top: 50%;
    /* left: 50%; */
    height: 100px;
    margin: 0 10px 10px 0;
    padding: 20px 20px 20px;
    border-radius: 5px;
    text-align: center;
    width: -webkit-fill-available;
    }
    .k-line {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background: #01fef9;
    /* background-color:#4b9cdb */
    }
    .k-line11-1 {
    animation: k-loadingP 2s infinite;
    }
    .k-line11-2 {
    animation: k-loadingP 2s infinite;
    animation-delay: 0.15s;
    }
    .k-line11-3 {
    animation: k-loadingP 2s infinite;
    animation-delay: 0.3s;
    }
    .k-line11-4 {
    animation: k-loadingP 2s infinite;
    animation-delay: 0.45s;
    }
    .k-line11-5 {
    animation: k-loadingP 2s infinite;
    animation-delay: 0.6s;
    }
    @keyframes k-loadingP {
    0% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        /* Safari and Chrome */
        -moz-transform: translateY(0);
        /* Firefox */
        -o-transform: translateY(0);
        /* Opera */
    }
    35% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        /* Safari and Chrome */
        -moz-transform: translateY(0);
        /* Firefox */
        -o-transform: translateY(0);
        /* Opera */
        opacity: 0.3;
    }
    50% {
        transform: translateY(-20px);
        -webkit-transform: translateY(-20px);
        /* Safari and Chrome */
        -moz-transform: translateY(-20px);
        /* Firefox */
        -o-transform: translateY(-20px);
        /* Opera */
        opacity: 0.8;
    }
    70% {
        transform: translateY(3px);
        -webkit-transform: translateY(3px);
        /* Safari and Chrome */
        -moz-transform: translateY(3px);
        /* Firefox */
        -o-transform: translateY(3px);
        /* Opera */
        opacity: 0.8;
    }
    85% {
        transform: translateY(-3px);
        -webkit-transform: translateY(-3px);
        /* Safari and Chrome */
        -moz-transform: translateY(-3px);
        /* Firefox */
        -o-transform: translateY(-3px);
        /* Opera */
    }
    }

html

<div id="wrapp_loading" class="wrapp_loading" style="display: none;">
    <div class="k-line k-line11-2"></div>
    <div class="k-line k-line11-3"></div>
    <div class="k-line k-line11-4"></div>
    <div class="k-line k-line11-5"></div>
</div>

js 显示部分

        document.getElementById('wrapp_loading').style.display = "block"
        document.body.style.cursor = "wait";

在触发请求事件的时候显示加载框，配合document.body.style.cursor = “wait”;使鼠标显示加载样式

js结束部分

          document.getElementById('wrapp_loading').style.display = "none";
          if(document.body.style.cursor === "wait"){
               document.body.style.cursor = "default";
            }