                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /常用的網(wǎng)頁加載進度條

我這么寫為什么進度條都沒有顯示，求教各位大神

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd?
">
<html?xmlns="http://www.w3.org/1999/xhtml?
">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>進度條3</title>
<style>
.loading{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:#fff;}
.loading?.pic{width:50px;height:50px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
.loading?.pic?i{display:block;float:left;width:6px;height:50px;background:#F36;margin:0?2px;transform:scaleY(0.4);
animation:load?1.2s?infinite;}
@keyframes?load{
0%,40%,100%{transform:scaleY(0.4)}
}
20%{transform:scaleY(1)}
}
</style>
</head>?
<body>
<div?class="loading">
<div?class="pic">
??<i></i>
??<i></i>
??<i></i>
??<i></i>
??<i></i>
</div>
</div>
<img?src="http://imgsrc.baidu.com/imgad/pic/item/b03533fa828ba61e5e6d4c0d4b34970a304e5915.jpg?
"?alt=""?/>
<img?src="http://imgsrc.baidu.com/imgad/pic/item/574e9258d109b3deb13fbe4cc6bf6c81800a4c15.jpg?
"?alt=""?/>
<img?src="http://tupian.enterdesk.com/2013/mxy/12/11/4/4.jpg?
"?alt=""?/>
<img?src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1500113966034&di=3aca769a417e0201a06c662d64e12b2a&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue%252C0%252C0%252C245%252C40%2Fsign%3D4ea99ec2f8d3572c72ef949fe27a0952%2Ff7246b600c338744af80e6575b0fd9f9d72aa050.jpg?
"?alt=""?/>
<img?src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1500113966033&di=82a53309f165724b2d2246803a97e12c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2Fb812c8fcc3cec3fdd71a0456dc88d43f879427e8.jpg?
"?alt=""?/>
<img?src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1500113989285&di=e3bd8c99fa83d6561e3d03c10d92bd1e&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F03%2F14%2Fc0391a6c1efab3fe00911b04e8cedca4.jpg?
"?alt=""?/>
<img?src="http://b.hiphotos.baidu.com/image/pic/item/d1a20cf431adcbef27ec5330a6af2edda3cc9f2f.jpg?
"?alt=""?/>
<img?src="http://f.hiphotos.baidu.com/image/pic/item/0ff41bd5ad6eddc4e43f99cd33dbb6fd5266332f.jpg?
"?alt=""?/>
</body>
</html>