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 @   Gaochunling  阅读(150)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示