正在加载中，请稍后
author 首页 关于 笔记

按回车搜索更多
html5 页面加载loading 动画效果 第二弹(基于原生JS CSS)
2019-01-04 阅读 {{counts.readCount}} 评论 {{counts.commentCount}}

上一篇博客已经实现了第一种加载中特效，地址: https://zzzmh.cn/single?id=51

最近用在新网站 https://chrome.zzzmh.cn 后发现问题，刷新频率高的情况下，动画太多反而引起不适。

故又用同样方案，重做了一个好看又干净的loading加载中动画，用法和之前一样，也是基于原生js css，无第三方依赖。

 


loading.js

  1.  document.body.innerHTML += ('<div id="preloader-body"><div id="cube-wrapper"><div class="cube-folding"><span class="leaf1"></span><span class="leaf2"></span><span class="leaf3"></span><span class="leaf4"></span></div><span class="loading"data-name="Loading">Loading</span></div></div>');
  2. window.onload = function () {
  3.     document.getElementById('cube-wrapper').style.display = "none";
  4.     document.getElementById('preloader-body').style.display = "none";
  5. }

 

 

 loading.css

  1.  #preloader-body{
  2.     position: fixed;
  3.     top: 0;
  4.     left: 0;
  5.     right: 0;
  6.     bottom: 0;
  7.     background-color: #fff;
  8.     z-index: 9999;
  9.  
  10. }
  11. .cube-folding {
  12.   width: 50px;
  13.   height: 50px;
  14.   display: inline-block;
  15.   -moz-transform: rotate(45deg);
  16.   -ms-transform: rotate(45deg);
  17.   -webkit-transform: rotate(45deg);
  18.   transform: rotate(45deg);
  19.   font-size: 0;
  20. }
  21. .cube-folding span {
  22.   position: relative;
  23.   width: 25px;
  24.   height: 25px;
  25.   -moz-transform: scale(1.1);
  26.   -ms-transform: scale(1.1);
  27.   -webkit-transform: scale(1.1);
  28.   transform: scale(1.1);
  29.   display: inline-block;
  30. }
  31. .cube-folding span::before {
  32.   content: '';
  33.   background-color: #007ee5;
  34.   position: absolute;
  35.   left: 0;
  36.   top: 0;
  37.   display: block;
  38.   width: 25px;
  39.   height: 25px;
  40.   -moz-transform-origin: 100% 100%;
  41.   -ms-transform-origin: 100% 100%;
  42.   -webkit-transform-origin: 100% 100%;
  43.   transform-origin: 100% 100%;
  44.   -moz-animation: folding 2.5s infinite linear both;
  45.   -webkit-animation: folding 2.5s infinite linear both;
  46.   animation: folding 2.5s infinite linear both;
  47. }
  48. .cube-folding .leaf2 {
  49.   -moz-transform: rotateZ(90deg) scale(1.1);
  50.   -ms-transform: rotateZ(90deg) scale(1.1);
  51.   -webkit-transform: rotateZ(90deg) scale(1.1);
  52.   transform: rotateZ(90deg) scale(1.1);
  53. }
  54. .cube-folding .leaf2::before {
  55.   -moz-animation-delay: 0.3s;
  56.   -webkit-animation-delay: 0.3s;
  57.   animation-delay: 0.3s;
  58.   background-color: #34a4ff;
  59. }
  60. .cube-folding .leaf3 {
  61.   -moz-transform: rotateZ(270deg) scale(1.1);
  62.   -ms-transform: rotateZ(270deg) scale(1.1);
  63.   -webkit-transform: rotateZ(270deg) scale(1.1);
  64.   transform: rotateZ(270deg) scale(1.1);
  65. }
  66. .cube-folding .leaf3::before {
  67.   -moz-animation-delay: 0.9s;
  68.   -webkit-animation-delay: 0.9s;
  69.   animation-delay: 0.9s;
  70.   background-color: #83c7ff;
  71. }
  72. .cube-folding .leaf4 {
  73.   -moz-transform: rotateZ(180deg) scale(1.1);
  74.   -ms-transform: rotateZ(180deg) scale(1.1);
  75.   -webkit-transform: rotateZ(180deg) scale(1.1);
  76.   transform: rotateZ(180deg) scale(1.1);
  77. }
  78. .cube-folding .leaf4::before {
  79.   -moz-animation-delay: 0.6s;
  80.   -webkit-animation-delay: 0.6s;
  81.   animation-delay: 0.6s;
  82.   background-color: #5cb6ff;
  83. }
  84.  
  85. @-moz-keyframes folding {
  86.   0%, 10% {
  87.     -moz-transform: perspective(140px) rotateX(-180deg);
  88.     transform: perspective(140px) rotateX(-180deg);
  89.     opacity: 0;
  90.   }
  91.   25%, 75% {
  92.     -moz-transform: perspective(140px) rotateX(0deg);
  93.     transform: perspective(140px) rotateX(0deg);
  94.     opacity: 1;
  95.   }
  96.   90%, 100% {
  97.     -moz-transform: perspective(140px) rotateY(180deg);
  98.     transform: perspective(140px) rotateY(180deg);
  99.     opacity: 0;
  100.   }
  101. }
  102. @-webkit-keyframes folding {
  103.   0%, 10% {
  104.     -webkit-transform: perspective(140px) rotateX(-180deg);
  105.     transform: perspective(140px) rotateX(-180deg);
  106.     opacity: 0;
  107.   }
  108.   25%, 75% {
  109.     -webkit-transform: perspective(140px) rotateX(0deg);
  110.     transform: perspective(140px) rotateX(0deg);
  111.     opacity: 1;
  112.   }
  113.   90%, 100% {
  114.     -webkit-transform: perspective(140px) rotateY(180deg);
  115.     transform: perspective(140px) rotateY(180deg);
  116.     opacity: 0;
  117.   }
  118. }
  119. @keyframes folding {
  120.   0%, 10% {
  121.     -moz-transform: perspective(140px) rotateX(-180deg);
  122.     -ms-transform: perspective(140px) rotateX(-180deg);
  123.     -webkit-transform: perspective(140px) rotateX(-180deg);
  124.     transform: perspective(140px) rotateX(-180deg);
  125.     opacity: 0;
  126.   }
  127.   25%, 75% {
  128.     -moz-transform: perspective(140px) rotateX(0deg);
  129.     -ms-transform: perspective(140px) rotateX(0deg);
  130.     -webkit-transform: perspective(140px) rotateX(0deg);
  131.     transform: perspective(140px) rotateX(0deg);
  132.     opacity: 1;
  133.   }
  134.   90%, 100% {
  135.     -moz-transform: perspective(140px) rotateY(180deg);
  136.     -ms-transform: perspective(140px) rotateY(180deg);
  137.     -webkit-transform: perspective(140px) rotateY(180deg);
  138.     transform: perspective(140px) rotateY(180deg);
  139.     opacity: 0;
  140.   }
  141. }
  142. #cube-wrapper {
  143.   position: fixed;
  144.   left: 50%;
  145.   top: 50%;
  146.   margin-top: -50px;
  147.   margin-left: -50px;
  148.   width: 100px;
  149.   height: 100px;
  150.   text-align: center;
  151. }
  152. #cube-wrapper:after {
  153.   content: '';
  154.   position: absolute;
  155.   left: 0;
  156.   right: 0;
  157.   bottom: -20px;
  158.   margin: auto;
  159.   width: 90px;
  160.   height: 6px;
  161.   background-color: rgba(0, 0, 0, 0.1);
  162.   -webkit-filter: blur(2px);
  163.   filter: blur(2px);
  164.   -moz-border-radius: 100%;
  165.   -webkit-border-radius: 100%;
  166.   border-radius: 100%;
  167.   z-index: 1;
  168.   -moz-animation: shadow 0.5s ease infinite alternate;
  169.   -webkit-animation: shadow 0.5s ease infinite alternate;
  170.   animation: shadow 0.5s ease infinite alternate;
  171. }
  172. #cube-wrapper .loading {
  173.   font-size: 12px;
  174.   letter-spacing: 0.1em;
  175.   display: block;
  176.   color: #007ee5;
  177.   position: relative;
  178.   top: 25px;
  179.   z-index: 2;
  180.   -moz-animation: text 0.5s ease infinite alternate;
  181.   -webkit-animation: text 0.5s ease infinite alternate;
  182.   animation: text 0.5s ease infinite alternate;
  183. }

 



用法与上次完全一致，简单说下。


方案1 直接引入，立即生效。

demo.html

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>demo</title>
  6.     <link rel="stylesheet" href="css/loading.css"/>
  7. </head>
  8. <body>
  9.     <!-- 此方案js必须引入在body第一行 -->
  10.     <script src="js/loading.js"></script>
  11.     <!-- 其余代码写在后面即可 -->
  12.     
  13.     
  14. </body>
  15. </html>



方案2 不引入js，将代码写入html

demo.html

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5.     <title>demo</title>
  6.     <link rel="stylesheet" href="css/loading.css"/>
  7. </head>
  8. <body>
  9.     <!-- 写在开头 -->
  10.     <div id="preloader-body">
  11.         <div id="cube-wrapper">
  12.             <div class="cube-folding">
  13.                 <span class="leaf1"></span>
  14.                 <span class="leaf2"></span>
  15.                 <span class="leaf3"></span>
  16.                 <span class="leaf4"></span>
  17.             </div>
  18.             <span class="loading"data-name="Loading">Loading</span>
  19.         </div>
  20.     </div>
  21.     
  22.     <!-- 中间写其他代码 -->
  23.     
  24.     
  25.     
  26.     <script>
  27.         // 末尾绑定window.onload事件 (也可以用jquery或者vue实现，只需要在window加载完毕后，触发隐藏2个div即可)
  28.         window.onload = function () {
  29.             document.getElementById('cube-wrapper').style.display = "none";
  30.             document.getElementById('preloader-body').style.display = "none";
  31.         }
  32.     </script>
  33. </body>
  34. </html>


最终效果可以刷新我的新网站看(没有做延迟消失，如果loading太快看不到，建议 ctrl+f5 强制刷新来延长加载时间)

 https://chrome.zzzmh.cn
提交
评论区空空如也，赶紧添加一条评论吧 评论 {{counts.commentCount}}
{{comment.name}} {{comment.os}} {{comment.browser}}
{{dateFormatter(comment.createTime)}}

{{comment.message}}

{{comment.reply.name}} {{comment.reply.os}} {{comment.reply.browser}}
{{dateFormatter(comment.reply.createTime)}}

{{comment.reply.message}}

 zzzmh
关于我 留言板

网址导航
{{alert.message}}
留言板 * 站长不经常查看信箱 若有重要事宜联系邮箱 admin@zzzmh.cn 取消 发送
云朵 ChungZH 起航天空 yiranzai 前端大爆炸 Web前端之家 前端博客 shirmy 小宁博客 pdbn LOGI 鄢云峰 边界AI 京东
Copyright © 2024 上海藏原羚工作室 沪ICP备18011999号 沪公网安备31010602005070号
微信公众号