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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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语句:使用策略模式优化代码结构