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>