今天有朋友问我网页顶部线形loading怎么来实现。那么关于这个问题,写这篇文章来探讨下这个东西的实现方式。它的实现方法其实有很多。下面我会列出2种形式。一种是用简单的css3+jquery来实现的。一种是用原生JS来实现的。第一种是一个静态的实现方式,第二种则是动态的。

为什么要加loading的效果
一款好的产品,都需要有一个漂亮的loading界面。lodaing界面不仅能给用户带来良好的体验,而且有效的消除了程序加载等待过程中的枯躁感。loading进度条更是对当前加载进度的一个良好反馈。从0%-100%的加载进度可以有效的告知用户还有多久即可打开页面。带有进度条的loading界面在程序中并不罕见,但是在web中呢?到目前为止浏览器并没有提供有效的浏览器对象来反馈页面的加载进度,所以无法直接、便捷的获得页面加载进度的反馈。

第一种jquery实现方式:

html:
  1. <div id="progress"> 
  2.    <span></span> 
  3. </div> 
css:
  1. body{ 
  2.       margin:0
  3.   } 
  4.   #progress { 
  5.       position:fixed
  6.       height2px
  7.       background:#6bc30d
  8.       transition:opacity 500ms linear 
  9.   } 
  10.   #progress.done { 
  11.       opacity:0 
  12.   } 
  13.   #progress span { 
  14.       position:absolute
  15.       height:2px
  16.       -webkit-box-shadow:#6bc30d 1px 0 6px 1px
  17.       -webkit-border-radius:100%
  18.       opacity:1
  19.       width:150px
  20.       right:-10px
  21.       -webkit-animation:pulse 2s ease-out 0s infinite; 
  22.   } 
  23.  
  24.   @-webkit-keyframes pulse { 
  25.       30% { 
  26.           opacity:.6 
  27.       } 
  28.       60% { 
  29.           opacity:0
  30.       } 
  31.       100% { 
  32.           opacity:.6 
  33.       } 
jquery代码:
  1. $({property: 0}).animate({property: 100}, { 
  2.     duration: 2000, 
  3.     step: function() { 
  4.         var percentage = Math.round(this.property); 
  5.  
  6.         $('#progress').css('width',  percentage+"%"); 
  7.  
  8.          if(percentage == 100) { 
  9.                 $("#progress").addClass("done");//完成,隐藏进度条 
  10.             } 
  11.     } 
  12. }); 
温馨提示:

1.这种方法简单明了,但兼容性不是太好。主流的浏览器肯定没有问题,但如果考虑IE兼容性的,就不要用此方法了。
2.duration是设置时间的。默认是2秒。换算代码:2000=2秒
3.请引入jquery库文件。否则程序不会运行


第二种原生JS实现方式:

html:

  1. <div id="top"></div> 
  2. <script>LoadingBar.setWidth(1)</script> 
  3. <div id="nav"></div> 
  4. <script>LoadingBar.setWidth(20)</script> 
  5.  
  6. <div id="banner"></div> 
  7. <script>LoadingBar.setWidth(40)</script> 
  8.  
  9. <div id="main"></div> 
  10. <script>LoadingBar.setWidth(60)</script> 
  11.  
  12. <div id="right"></div> 
  13. <script>LoadingBar.setWidth(90)</script> 
  14.  
  15. <div id="foot"></div> 
  16. <script>LoadingBar.setWidth(100)</script> 
css代码:
  1. .animation_paused{ 
  2.   -webkit-animation-play-state:paused; 
  3.   -moz-animation-play-state:paused; 
  4.   -ms-animation-play-state:paused; 
  5.   animation-play-state:paused; 
js代码:
  1. var LoadingBar = { 
  2.   /*初始化*/ 
  3.   init:function(){ 
  4.     this.creatStyle(); 
  5.     this.creatLoadDiv(); 
  6.   }, 
  7.   /*记录当前宽度*/ 
  8.   width:0, 
  9.   /*页面里LoadingBar div*/ 
  10.   oLoadDiv : false
  11.   /*开始*/ 
  12.   setWidth : function(w){ 
  13.     if(!this.oLoadDiv){this.init();} 
  14.     var oLoadDiv = this.oLoadDiv, 
  15.       width = Number(w) || 100; 
  16.     /*防止后面写入的width小于前面写入的width*/ 
  17.     (width<this.width) ? width=this.width : this.width = width; 
  18.     oLoadDiv.className = 'animation_paused'
  19.     oLoadDiv.style.width = width + '%'
  20.     oLoadDiv.className = ''
  21.     if(width === 100){this.over(oLoadDiv);} 
  22.   }, 
  23.   /*页面加载完毕*/ 
  24.   over : function(obj){ 
  25.     setTimeout(function(){ 
  26.       obj.style.display = 'none'
  27.     },1000); 
  28.   }, 
  29.   /*创建load条*/ 
  30.   creatLoadDiv : function(){ 
  31.     var div = document.createElement('div'); 
  32.     div.id = 'LoadingBar'
  33.     document.body.appendChild(div); 
  34.     this.oLoadDiv = document.getElementById('LoadingBar'); 
  35.   }, 
  36.   /*创建style*/ 
  37.   creatStyle : function(){ 
  38.     var nod = document.createElement('style'),    
  39.       str = '#LoadingBar{transition:all 1s;-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;background-color:#f90;height: 3px;width:0; position: fixed;top: 0;z-index: 99999;left: 0;font-size: 0;z-index:9999999;_position:absolute;_top:expression(eval(document.documentElement.scrollTop));}.animation_paused{-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-ms-animation-play-state:paused;animation-play-state:paused;};' 
  40.     nod.type = 'text/css'
  41.     //ie下 
  42.     nod.styleSheet ? nod.styleSheet.cssText = str : nod.innerHTML = str;  
  43.     document.getElementsByTagName('head')[0].appendChild(nod);  
  44.   } 

返回顶部