自定义 loading... 效果

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);			
}

效果如下图所示：

自定义 loading... 效果

猜你喜欢