原生js自定义 加载中... 效果

原生js自定义 加载中… 效果

描述一下：

我们在发请求获取数据的时候，可以提示一下此时正在 加载中... 的效果，引入庞大的框架感觉不适合
所以作者用原生js写一个类似的 加载中... 的基本效果，来满足自己的需求，仅此而已。没有针对的意思。

效果图如下：

使用：

基本使用：startLoading();

配置使用：
	var obj = {
		title:"请稍候",
		tips:"加载中..." 
	};
	startLoading(obj);

隐藏：stopLoading();

js代码如下：

//startLoading.js

(function(w){
	var showLoadingOnOff = false;
	var loadingBox = null;
	var loadingTxt = null;
	var loadingTips = null;
	var timer = null;
	var oW = null;
	function startLoading(objInfo){
		var mTitle = objInfo && objInfo.title || "请稍候";
		var tips = objInfo && objInfo.tips || "加载中...";

		if(showLoadingOnOff == false){
			loadingBox = document.createElement("div");
			loadingBox.style.cssText = `width:120px;height:120px;position:absolute;top:50%;left:50%;margin-left:-60px;margin-top:-60px;background:rgba(0,0,0,0.5);border-radius:10px;overflow:hidden;`;

			loadingTips = document.createElement("p");
			loadingTips.style.cssText = `white-space:nowrap;height:30px;text-align:center;margin:30px auto 20px;color:white;`;		

			loadingTxt = document.createElement("p");
			loadingTxt.style.cssText = `text-align:center;color:#f5f5f5;font-size:15px;`;

			loadingBox.appendChild(loadingTips);
			loadingBox.appendChild(loadingTxt);
			document.body.appendChild(loadingBox);
		}
		loadingTxt.innerHTML = mTitle;
		loadingTips.innerHTML = tips;
		showLoadingOnOff = true;
		loadingBox.style.display = "block";

		oW = loadingTips.offsetWidth;
		loadingTips.style.width = "0px";
		loadingTips.style.overflow = "hidden";
		
		var iW = 0;
		timer = setInterval(function(){
			iW += 16;
			if(iW >= oW){
				iW=0;
			}
			loadingTips.style.width = iW+"px";
		},100);
	}

	function stopLoading(){
		clearInterval(timer);
		loadingBox.style.display = "none";
		loadingTips.style.width = oW+"px";
		timer = null;
	}
	w.startLoading = startLoading;
	w.stopLoading = stopLoading;

})(window);

结束

喜欢的可以关注 点赞 支持一下

持续更新ing