loading 遮罩demo
生活随笔
收集整理的這篇文章主要介紹了
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>?
轉載于:https://www.cnblogs.com/litterjoan/articles/5801952.html
總結
以上是生活随笔為你收集整理的loading 遮罩demo的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux-ntpdate同步更新时间
- 下一篇： 第六周周总结