网页加载进度条 CSSanimation（动画）、transition（过渡）、transform（变形）、translate（移动）

常用的网页加载进度条

效果图：

进度条gif网址：https://icons8.com/preloaders/
进度条css网址：https://loading.io/
CSS动画兼容：https://autoprefixer.github.io/

方法1（gif图片，设置定时器）

html中：

 <div class="loading">
    		<img class="pic">
    </div>

css中：

.loading .pic{
			position:inherit;
			background:url(src/loading.gif) no-repeat ; （gif图片网址如上）
			width: 160px;
			height: 20px;
			/*top: 50%;
			left: 50%;
			margin-top: -10px;
			margin-left: -150px;*/
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			z-index:10;
}

js中：

$(function(){
			setInterval(function(){
				$('.loading').fadeOut();
			},3000)
		})

或者都在js中：

$(function(){
			var loading = '<div class="loading"><img class="pic"></div>';
			$('body').append(loading);
			setInterval(function(){
				$('.loading').fadeOut();
			},3000)
		})

方法2.通过document.onreadystatechange以及document.readyState判断网页是否加载完成

document.onreadystatechange 页面加载状态改变时的事件
document.readyState 返回文档当前的状态

<script >
		document.onreadystatechange = function(){
			console.log(document.readyState);
			if(document.readyState=="complete"){
				$('.loading').fadeOut();
			}
		}
	</script>

3.不使用gif，而使用css

代码：

	.loading{
		width: 100%;
		height:100%;
		position: absolute;
		top:0;
		left: 0;
		z-index: