之前项目手写loading加载ingdemo, 其中涉及图片是项目中用到,
注意: loadingBar div需要放到页面内容最前面; 至于何时出现或者控制隐藏显示 可使用js灵活控制即可。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>loading遮罩demo</title> </head><body> <style> .loadingBar{background-color:white;display:block;text-align:center;position:fixed;width:100%;height:100%;top:0;left:0;z-index:9999} .loadingBar:before{content:"";display:inline-block;height:100%;vertical-align:middle} .loadingIcon{width:90px;height:90px;background-image:url(http://J.bjyyb.net/images/yiyingbaologo.png);background-size:65px auto;background-repeat:no-repeat;display:inline-block;vertical-align:middle;background-position:center center;position:relative;top:-30%} #rotation{animation:rotation 1.8s linear infinite;-moz-animation:rotation 1.8s linear infinite;-webkit-animation:rotation 1.8s linear infinite;-o-animation:rotation 1.8s linear infinite} @keyframes rotation{from{transform:rotate(360deg)}to{transform:rotate(0deg)}} @-moz-keyframes rotation{from{-moz-transform:rotate(360deg)}to{-moz-transform:rotate(0deg)}} @-webkit-keyframes rotation{from{-webkit-transform:rotate(360deg)}to{-webkit-transform:rotate(0deg)}} @-o-keyframes rotation{from{-o-transform:rotate(360deg)}to{-o-transform:rotate(0deg)}} </style> <div class="loadingBar"date-loadTimg="0"><div class="loadingIcon"><embed width="90"height="90"src="http://test.qdetong.com/public/images/rotation.svg"id="rotation"type="image/svg+xml"></embed></div> </div> </body> </html>