JS 实现加载中转圈效果

 

以下3步走实现加载中，来源网络……

1.添加CSS 加载中转圈CSS

 #loading {
            margin: auto;
            margin-top: 10px;
            display: block;
            width: 100px;
            height: 100px;
            background: #FFFFFF;
            /*border: 1px solid black;*/
        }

            #loading .pic {
                display: block;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                box-shadow: 0 2px 0 #666;
                animation: loop 1s infinite;
                -webkit-animation: loop 1s infinite;
            }

        @keyframes loop {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg );
            }
        }

 

2.添加JS代码   点击后出现加载中效果

window.onload=funciton(){
//目标控件btnQuery Click后呈现加载中
   document.getElementById('btnQuery').onclick = function () {
                document.getElementById("loading").style.display = 'block';
            }  
}

加载完成后隐藏加载中

 document.onreadystatechange = function () {
            if (document.readyState == "complete") {//检测加载完成
                document.getElementById("loading").style.display = 'none';

            }
        }

3.添加P标签

                <p id="loading">
                    <span class="pic"></span>
                </p>

 

鉴于上述实现方式比较麻烦，小子考虑将其全部集成到JS中实现。其实现如下：

window.onload = function () {
    var loadCss = document.createElement("style");
    loadCss.type = "text/css";
    loadCss.innerHTML = "@keyframes loop { 0%{transform: rotate(0deg);} 100%{ transform: rotate(360deg);}";
    document.head.appendChild(loadCss);

    var p = document.createElement("p");
    p.id = "loading";
    var pic = document.createElement("picture");
    p.style.cssText = "display: none;width: 100px;height: 100px;background: rgba(255, 255, 255,0);position: fixed;top: 50%;left: 50%;z-index: 999999;";
    pic.style.cssText = "display: block;width: 50px;height: 50px;border-radius: 50%;box-shadow: 0 2px 0 #666; animation: loop 1s infinite;-webkit-animation: loop 1s infinite;";
    p.appendChild(pic);
    document.body.appendChild(p);
    document.getElementById('btnQuery').onclick = function () {//目标控件，换成需要的ID
        document.getElementById("loading").style.display = 'block';
    }
}
document.onreadystatechange = function () {
    if (document.readyState == "complete") {//检测加载完成
        try {
            document.getElementById("loading").style.display = 'none';
            //document.body.removeChild(p);
        } catch (e) {

        }
    }
}

注意：若你的JS中已经使用过了window.onload,那么请将上述写在window.onload中的代码加入你的onload中，或者将其全部copy出来放到页面最后的script标签中，否则可能会对你自己所写的window.onload中函数造成影响（测试中出现此问题）。

写在页面底部则如下：

<script>
    var loadCss = document.createElement("style");
    loadCss.type = "text/css";
    loadCss.innerHTML = "@keyframes loop { 0%{transform: rotate(0deg);} 100%{ transform: rotate(360deg);}";
    document.head.appendChild(loadCss);

    var p = document.createElement("p");
    p.id = "loading";
    var pic = document.createElement("picture");
    p.style.cssText = "display: none;width: 100px;height: 100px;background: rgba(255, 255, 255,0);position: fixed;top: 50%;left: 50%;z-index: 999999;";
    pic.style.cssText = "display: block;width: 50px;height: 50px;border-radius: 50%;box-shadow: 0 2px 0 #666; animation: loop 1s infinite;-webkit-animation: loop 1s infinite;";
    p.appendChild(pic);
    document.body.appendChild(p);
    document.getElementById('btnQuery').onclick = function () {//目标控件，换成需要的ID
        document.getElementById("loading").style.display = 'block';
    }

document.onreadystatechange = function () {
    if (document.readyState == "complete") {//检测加载完成
        try {
            document.getElementById("loading").style.display = 'none';
            //document.body.removeChild(p);
        } catch (e) {

        }
    }
}
</script>