上一篇博客已经实现了第一种加载中特效,地址: 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. </body>
  13. </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. <script>
  23. // 末尾绑定window.onload事件 (也可以用jquery或者vue实现,只需要在window加载完毕后,触发隐藏2个div即可)
  24. window.onload = function () {
  25. document.getElementById('cube-wrapper').style.display = "none";
  26. document.getElementById('preloader-body').style.display = "none";
  27. }
  28. </script>
  29. </body>
  30. </html>


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

 https://chrome.zzzmh.cn