自定義 loading... 效果
阿新 • • 發佈:2018-12-15
loading.html程式碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loading效果</title>
</head>
<body>
<script src="loading.js"></script>
<script>
loading();
</script>
</body>
</html>
loading.js程式碼如下:
var isShowLoad = true; function loading(){ // 先刪除原有的 var rmLoad = document.getElementsByClassName('load-mask'); /*if(!!rmLoad){ for(var i=0,len=rmLoad.length; i<len; i++){ document.body.removeChild(rmLoad[i]); } }*/ if(rmLoad.length>0){ for(var i=0,len=rmLoad.length; i<len; i++){ document.body.removeChild(rmLoad[i]); } } // 建立元素 var loadMask = document.createElement('div'); loadMask.classList.add('load-mask'); loadMask.id = 'load-mask'; document.body.appendChild(loadMask); // 給建立元素新增樣式 loadMask.style.position='fixed'; loadMask.style.top='0'; loadMask.style.left='0'; loadMask.style['background-color']='rgba(0,0,0,.5)'; loadMask.style['z-index']='9999'; loadMask.style.width='100vw'; loadMask.style.height='100vh'; loadMask.innerHTML = '<div style="width: 100%;height: 100%;position: relative;display:table;text-align: center;"><div style="display: table-cell;vertical-align: middle;color: #fff;font-weight: bold;"><i>loading</i><i class="spot" style="display: inline-block;width: 50px;text-align: left;">...</i></div></div>'; var mask = document.getElementById('load-mask'); var spot = mask.getElementsByClassName('spot')[0]; var spotNum = 0; console.log('loading...'); var effect = { load: function(){ var isLoad = isShowLoad; if(isLoad){ (function(){ // 判斷點的個數是否大於3 if(spotNum<3){ spotNum ++; } else{ spotNum = 0; } // 設定顯示點的個數 if(spotNum==1){ spot.innerText = '.'; } else if(spotNum==2){ spot.innerText = '..'; } else if(spotNum==3){ spot.innerText = '...'; } else{ spot.innerText = ''; } setTimeout(effect.load,500); })(); }else{ document.body.removeChild(mask); } } }; effect.load();// 呼叫 // setTimeout(function(){isShowLoad=false;},5000); }
效果如下圖所示: