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

按回车搜索更多
html5 页面加载loading 动画效果 基于原生css3 javascript
2018-12-18 阅读 {{counts.readCount}} 评论 {{counts.commentCount}}


服务器配置或者网络等原因，若一个页面原本加载速度过慢，

或者js css加载完成初始化成功之前，页面先会暂时很扭曲，用户体验会很差。

就需要给html5页面加上一个加载中的loading动画。

我在百度找了十多种，都发现一个共同的问题，就是代码很牛，效果很好，就是不会用，

于是我找了一个完全是原生JavaScript + CSS3的方案，集成到js和css中来实现。

无需其他任何依赖，也不需要自己再实现代码。



本文并非原创，而是在别人的基础上，改进和封装了他的代码。

主要修改地方包括

1、尽最大可能做到只需要在正确位置引入一个js和一个css即可。无需加入其他任何代码。

2、需要注意的是，为了更早加载完成DIV#loader-wrapper，建议将loading.js放在body第一行。或者翻到下半页采取方案2。

3、取消了原文通过jquery隐藏load_title的方案，直接在css 142行改进成结束load_title自己消失。


本文没有演示地址，我已经把最终代码部署到整个博客了，按Ctrl + F5 强制刷新页面，就可以看到效果。

原文中举得例子：http://crusader12.com/C12HoverAlls/

参考的原文地址 : http://www.ibloger.net/article/401.html


正文开始

直接上代码：

loading.css ( 调整背景色代码在103行 )

  1. .chromeframe {
  2.     margin: .2em 0;
  3.     background: #ccc;
  4.     color: #000;
  5.     padding: .2em 0
  6. }
  7.  
  8. #loader-wrapper {
  9.     position: fixed;
  10.     top: 0;
  11.     left: 0;
  12.     width: 100%;
  13.     height: 100%;
  14.     z-index: 999999
  15. }
  16.  
  17. #loader {
  18.     display: block;
  19.     position: relative;
  20.     left: 50%;
  21.     top: 50%;
  22.     width: 150px;
  23.     height: 150px;
  24.     margin: -75px 0 0 -75px;
  25.     border-radius: 50%;
  26.     border: 3px solid transparent;
  27.     border-top-color: #FFF;
  28.     -webkit-animation: spin 2s linear infinite;
  29.     -ms-animation: spin 2s linear infinite;
  30.     -moz-animation: spin 2s linear infinite;
  31.     -o-animation: spin 2s linear infinite;
  32.     animation: spin 2s linear infinite;
  33.     z-index: 1001
  34. }
  35.  
  36. #loader:before {
  37.     content: "";
  38.     position: absolute;
  39.     top: 5px;
  40.     left: 5px;
  41.     right: 5px;
  42.     bottom: 5px;
  43.     border-radius: 50%;
  44.     border: 3px solid transparent;
  45.     border-top-color: #FFF;
  46.     -webkit-animation: spin 3s linear infinite;
  47.     -moz-animation: spin 3s linear infinite;
  48.     -o-animation: spin 3s linear infinite;
  49.     -ms-animation: spin 3s linear infinite;
  50.     animation: spin 3s linear infinite
  51. }
  52.  
  53. #loader:after {
  54.     content: "";
  55.     position: absolute;
  56.     top: 15px;
  57.     left: 15px;
  58.     right: 15px;
  59.     bottom: 15px;
  60.     border-radius: 50%;
  61.     border: 3px solid transparent;
  62.     border-top-color: #FFF;
  63.     -moz-animation: spin 1.5s linear infinite;
  64.     -o-animation: spin 1.5s linear infinite;
  65.     -ms-animation: spin 1.5s linear infinite;
  66.     -webkit-animation: spin 1.5s linear infinite;
  67.     animation: spin 1.5s linear infinite
  68. }
  69.  
  70. @-webkit-keyframes spin {
  71.     0% {
  72.         -webkit-transform: rotate(0deg);
  73.         -ms-transform: rotate(0deg);
  74.         transform: rotate(0deg)
  75.     }
  76.  
  77.     100% {
  78.         -webkit-transform: rotate(360deg);
  79.         -ms-transform: rotate(360deg);
  80.         transform: rotate(360deg)
  81.     }
  82. }
  83.  
  84. @keyframes spin {
  85.     0% {
  86.         -webkit-transform: rotate(0deg);
  87.         -ms-transform: rotate(0deg);
  88.         transform: rotate(0deg)
  89.     }
  90.  
  91.     100% {
  92.         -webkit-transform: rotate(360deg);
  93.         -ms-transform: rotate(360deg);
  94.         transform: rotate(360deg)
  95.     }
  96. }
  97.  
  98. #loader-wrapper .loader-section {
  99.     position: fixed;
  100.     top: 0;
  101.     width: 51%;
  102.     height: 100%;
  103.     background: #1abc9c;/*背景色 原#1abc9c */
  104.     z-index: 1000;
  105.     -webkit-transform: translateX(0);
  106.     -ms-transform: translateX(0);
  107.     transform: translateX(0)
  108. }
  109.  
  110. #loader-wrapper .loader-section.section-left {
  111.     left: 0
  112. }
  113.  
  114. #loader-wrapper .loader-section.section-right {
  115.     right: 0
  116. }
  117.  
  118. .loaded #loader-wrapper .loader-section.section-left {
  119.     -webkit-transform: translateX(-100%);
  120.     -ms-transform: translateX(-100%);
  121.     transform: translateX(-100%);
  122.     -webkit-transition: all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);
  123.     transition: all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)
  124. }
  125.  
  126. .loaded #loader-wrapper .loader-section.section-right {
  127.     -webkit-transform: translateX(100%);
  128.     -ms-transform: translateX(100%);
  129.     transform: translateX(100%);
  130.     -webkit-transition: all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000);
  131.     transition: all .7s .3s cubic-bezier(0.645,0.045,0.355,1.000)
  132. }
  133.  
  134. .loaded #loader {
  135.     opacity: 0;
  136.     -webkit-transition: all .3s ease-out;
  137.     transition: all .3s ease-out
  138. }
  139.  
  140. /* 原版load_title是从上面飘出去，感觉太二了注销掉了，结束自动消失 */
  141. .loaded #loader-wrapper {
  142.     visibility: hidden;
  143.     /*-webkit-transform: translateY(-100%);*/
  144.     /*-ms-transform: translateY(-100%);*/
  145.     /*transform: translateY(-100%);*/
  146.     /*-webkit-transition: all .3s 1s ease-out;*/
  147.     /*transition: all .3s 1s ease-out*/
  148. }
  149.  
  150. .no-js #loader-wrapper {
  151.     display: none
  152. }
  153.  
  154. .no-js h1 {
  155.     color: #222
  156. }
  157.  
  158. #loader-wrapper #load_title {
  159.     font-family: 'Open Sans';
  160.     color: #FFF;
  161.     font-size: 19px;
  162.     width: 100%;
  163.     text-align: center;
  164.     z-index: 9999999999999;
  165.     position: absolute;
  166.     top: 60%;
  167.     opacity: 1;
  168.     line-height: 30px
  169. }
  170.  
  171. #loader-wrapper #load_title span {
  172.     font-weight: normal;
  173.     font-style: italic;
  174.     font-size: 13px;
  175.     color: #FFF;
  176.     opacity: .5
  177. }

 

 

loading.js ( 基于javascript，无需其他依赖，只能放在body内或者body后。推荐放在body第一行引入该js！ 或者如果觉得在body里引 js 不太好的话，往下翻，我在后面还写了个方案2）

  1. // 这个js建议放在body第一行
  2. document.body.innerHTML += ('<div id="loader-wrapper"><div id="loader"></div><div class="loader-section section-left"></div><div class="loader-section section-right"></div><div id="load_title">正在加载中，请稍后</div></div>');
  3. window.onload = function () {
  4.     //直接用等于可能覆盖原来的class，所以采用 原内容+空格loaded。就算body原来没有class也不会报错
  5.     document.body.className += ' loaded';
  6. }


 


 

 代码安放位置 ( loading.css建议放在head里 , loading.js必须放在body内或body后，越靠前效果越好，推荐放在body第一行 )

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <title>title</title>
  5.     ...
  6.     <link rel="stylesheet" href="css/loading.css">
  7.     ...
  8. </head>
  9. <body>
  10.     <script src="js/loading.js"></script>
  11.     
  12.     ...
  13.     ...
  14.     ...
  15.     
  16. </body>





方案2 不引入js，而是在页面内实现代码逻辑

CSS还是同上不变，不需要引入方案1的js，直接在html的body开头加上<div id="loader-wrapper">...</div>， 在body末尾加onload事件 ，最终效果与方案1等价

  1.  <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <title>title</title>
  5.     ...
  6.     <!-- 引入css -->
  7.     <link rel="stylesheet" href="css/loading.css">
  8.     ...
  9. </head>
  10. <body>
  11.     <!-- 手动加入DIV#loader-wrapper -->
  12.     <div id="loader-wrapper">
  13.         <div id="loader"></div>
  14.         <div class="loader-section section-left"></div>
  15.         <div class="loader-section section-right"></div>
  16.         <div id="load_title">正在加载中，请稍后</div>
  17.     </div>
  18.     
  19.     ...
  20.     ...
  21.     ...
  22.     
  23.     <script type="text/javascript">
  24.         window.onload = function () {
  25.             /* window中所有元素加载完成后，给body加个class -> loaded，也可以通过 jquery || vue 实现等价代码 */
  26.             document.body.className += ' loaded';
  27.         }
  28.     </script>
  29. </body>

 

 
提交
评论区空空如也，赶紧添加一条评论吧 评论 {{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号
微信公众号