js實現等待載入“轉圈圈”效果
阿新 • • 發佈：2019-02-15
完美實現載入轉圈圈效果：
js程式碼:
function showLoading(show){
if(show){document.getElementById("over").style.display = "block";
document.getElementById("layout").style.display = "block";
}else{
document.getElementById("over").style.display = "none";
document.getElementById("layout").style.display = "none";
}
}
樣式：
.overLoading {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f5f5f5;
opacity:0.5;
z-index: 1000;
}
.layoutLoading {
display: none;
position: absolute;
top: 40%;
left: 40%;
width: 20%;
height: 20%;
z-index: 1001;
text-align:center;
}
html:
<div id="over" class="overLoading"></div>
<div id="layout" class="layoutLoading"><img src="${base}/resources/admin/images/loading.gif" /></div>
看懂了嗎？還缺少一張圖！附件下載