原生js 仿微信网页加载进度条的提示

一些H5页面在网络加载时，事件会一直监听并触发 readystatechange 事件。某些需要提示网页 加载进度，进行进度条提醒的友好提示，类似微信访问微信公众号会出现进度条。一下分享提供大家参考学习。

用原声JS实现的方法，只需要引入js脚本文件到页面头部。

引入progress.js。 添加到网页头部。

document.addEventListener('readystatechange',function() {
	var state = document.readyState;
	if('interactive' == state)  {
		var create_progress = document.createElement("div");
		create_progress.setAttribute("class","page_progress_mes");
		create_progress.setAttribute("style","position: fixed;top:0px;border: 1px rgb(86, 188, 58) solid;width: 0%;opacity: 1;transition-property:width,opacity;transition-delay: 0s;transition-timing-function: linear;transition-duration: 7s");
		document.body.appendChild(create_progress);
		
		setTimeout(function() {
			document.querySelector('.page_progress_mes').style.width = "90%";
		},0);
		
	}else{
		document.querySelector('.page_progress_mes').style.transitionDuration = "0.3s";
		document.querySelector('.page_progress_mes').style.width = "100%";
		setTimeout(function() {document.querySelector('.page_progress_mes').style.transitionDuration = "0.1s";
			document.querySelector('.page_progress_mes').style.opacity = '0';
		},300);
	}
});

附件源码地址：http://download.csdn.net/download/china_guanq/10172196