网站添加Loading加载动画
2023-02-18 16:47:27 时间
Loading动画作用
网站添加Loading动画可有效防止部分浏览器打开网页后因为有些静态资源还没有加载完毕导致的闪屏、白屏、花屏、错误排版等BUG
效果展示
Loading动画代码
<!-- loading开始 -->
<style>#loading-animation{background-color:#fff;height:100%;width:100%;position:fixed;z-index:99999999999999999999999999999999999999999999999;margin-top:0px;top:0px;}#loading-animation-center{width:100%;height:100%;position:relative;}#loading-animation-center-absolute{position:absolute;left:50%;top:50%;height:200px;width:200px;margin-top:-100px;margin-left:-100px;}.loading_object{-moz-border-radius:50% 50% 50% 50%;-webkit-border-radius:50% 50% 50% 50%;border-radius:50% 50% 50% 50%;position:absolute;border-left:5px solid #87CEFA;border-right:5px solid #FFC0CB;border-top:5px solid transparent;border-bottom:5px solid transparent;-webkit-animation:animate 2.5s infinite;animation:animate 2.5s infinite;}#loading_one{left:75px;top:75px;width:50px;height:50px;}#loading_two{left:65px;top:65px;width:70px;height:70px;-webkit-animation-delay:0.1s;animation-delay:0.1s;}#loading_three{left:55px;top:55px;width:90px;height:90px;-webkit-animation-delay:0.2s;animation-delay:0.2s;}#loading_four{left:45px;top:45px;width:110px;height:110px;-webkit-animation-delay:0.3s;animation-delay:0.3s;}@-webkit-keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}@keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}</style><div id="loading-animation"><div id="loading-animation-center"><div id="loading-animation-center-absolute"><div class="loading_object" id="loading_four"></div><div class="loading_object" id="loading_three"></div><div class="loading_object" id="loading_two"></div><div class="loading_object" id="loading_one"></div></div></div></div><script>!function(){function e(){setTimeout(()=>{$("#loading-animation").fadeOut(540)},500)}window.jQuery?$(document).ready(()=>{e()}):document.onreadystatechange=(()=>{"interactive"===document.readyState&&e()})}();</script>
<!-- loading 结束 -->
HTML是从上至下解析,所以添加到哪里合适应该知道了吧
相关文章
- 从云原生到数字原生,数字化转型背后的需求逻辑发生哪些变化?
- 持续盈利背后,水滴“新增长”难寻?
- 农业银行:金融数字化转型这场硬仗,如何才能做到“有底”和“有数”?
- 大数据必学Java基础(八十七):枚举的深入了解
- 能源数字化,未来四十年看什么?
- 大数据必学Java基础(八十八):通过案例和概念体会反射的好处
- 大数据必学Java基础(八十九):反射的深入了解
- TDesign 更新周报(2022年12月第2周)
- 提产提效,你需要DOE试验设计!
- 大数据必学Java基础(九十):通过反射获取运行时类的完整结构
- 大数据必学Java基础(九十一):JDBC概述
- 上云、用数、赋智,这对CP为何能实现1+1>2?
- 释放数据生产力,网易数帆如何做到最优解?
- 元宇宙这把火,为何还得靠“数据”来助燃?
- AI这门“玄学”为何要从数据平台修起?
- 三倍于平均增速,新华三因何蝉联超融合市场第一?
- 技术立身,精进不止,华为主存储实现Gartner魔力象限两个方向持续提升
- 共建多云时代数仓新生态,华为数据存储+HashData带来了什么?
- 打破分布式存储性能纪录,中国电子云释放出什么信号?
- 识“微”见远,新华三模块化数据中心以智取胜