loading 遮罩demo

之前项目手写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>

 

posted @ 2016-08-24 10:42  Gaochunling  阅读(156)  评论(0)    收藏  举报