纯js的loading框

  
 <div id="over" class="over"></div>
 <div id="layout" class="layout">
  <img style="width: 50px;height: 50px;;" src="https://img.jbzj.com/file_images/article/201311/2013112931.gif" alt="" />		      	       
  <div style="width: 170px;font-size: 16px;margin-left: -20px;">正在认证，请稍后</div>
</div>

css代码

  .current a {
            font-size: 20px;
        }
        .over {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f5f5f5;
            opacity:0.5;
            z-index: 1000;
        }

        .layout {
            display: none;
            position: absolute;
            top: 35%;
            left: 35%;
            width: 30%;
            height: 30%;
            z-index: 1001;
            text-align:center;
        }

js代码

//在需要使用的地方调用即可
 function showLoading()
        {
            document.getElementById("over").style.display = "block";
            document.getElementById("layout").style.display = "block";
        }
function cancleLoading() {
            document.getElementById("over").style.display = "none";
            document.getElementById("layout").style.display = "none";
        }