网页打开动画 类似进度条加载

效果图

原理

通过控制span的width来实现 span的颜色为白色 上下两个div为蓝色

html

<div class="wrap">
			<div class="loadAn">
            	<div class="up"></div>
            	<div class="down"></div>
            	<span class="line"></span>
       		 </div>
		</div>

js

var laodAn=document.querySelector(".loadAn");
   		var loadAnUP=document.querySelector(".loadAn .up");
    	var loadAnDown=document.querySelector(".loadAn .down");
    	var loadAnLine=document.querySelector(".loadAn .line");
	   	
	   	loadingAn();
	    function loadingAn(){
	        var flag=0;
	        var imgArr=['bg1.jpg','bg2.jpg','bg3.jpg','bg1.jpg','bg2.jpg','bg3.jpg'];
	        for(var i=0;i<imgArr.length;i++){
		            var img=new Image();
		            img.src="img/"+imgArr[i];
		            img.onload=function(){
		                flag++;
		                loadAnLine.style.width=flag/imgArr.length*100+"%";
		            }
	        }
	        //给添加  addEventListener() 方法用于向指定元素添加事件句柄。 transitionend	该事件在 CSS 完成过渡后触发
	        //动画完成以后将幕布的高度缩小至不见，并移除该事件
	        loadAnLine.addEventListener("transitionend",function(){
	        	  if(flag===imgArr.length){
	                loadAnUP.style.height=0;
	                loadAnDown.style.height=0;
	                this.remove();
	          	 }
	        });
	        //没用的 删掉也可以
	        loadAnDown.addEventListener("transitionend",function(){
	            laodAn.remove();
	        });
	    }

css

.loadAn {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
}
.loadAn div {
  height: 50%;
  background: deepskyblue;
  transition: 1s height;
}
.loadAn .down {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.loadAn .line {
  width: 0;
  height: 4px;
  background-color: white;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -2px;
  transition: 1s width;
}