如何使用純CSS和jQuery實(shí)現(xiàn)在頁(yè)面頂部顯示的進(jìn)度條效果

小編給大家分享一下如何使用純CSS和jQuery實(shí)現(xiàn)在頁(yè)面頂部顯示的進(jìn)度條效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

一、純CSS實(shí)現(xiàn)

代碼如下:

<style type="text/css">
body{ margin:0; padding:0;}
@-moz-keyframes progressing {
 0% {
  width:0px;
 }
 100% {
  width:100%;
 }
}
@-webkit-keyframes progressing {
 0% {
  width:0px;
 }
 100% {
  width:100%;
 }
}
.progress {
 width:100%;
 height:5px;
 overflow:hidden;
 background-color:#27ccc0;
 position:fixed;
 top:0;
 left:0;
 z-index:9;
 -moz-animation:progressing 2s ease-out;
 -webkit-animation:progressing 2s ease-out;
}
</style>
<p class="progress"></p>

二、JQuery實(shí)現(xiàn)

一個(gè)在頁(yè)面頂部顯示的進(jìn)度條效果，像在智能手機(jī)上瀏覽網(wǎng)頁(yè)一樣，手機(jī)上的瀏覽器進(jìn)度條一般都在屏幕頂部，一條極細(xì)的小線條，當(dāng)頁(yè)面加載的時(shí)候，它就不斷的加載顯示進(jìn)度，本網(wǎng)頁(yè)進(jìn)度條特效與此十分相似，基于jquery插件實(shí)現(xiàn)的效果。

代碼如下:

<title>頁(yè)面頂部顯示的進(jìn)度條效果</title>
<div id="web_loading"><div></div></div>
<script src="/ajaxjs/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">// < ![CDATA[
 jQuery(document).ready(function(){
  jQuery("#web_loading div").animate({width:"100%"},800,function(){ 
   setTimeout(function(){jQuery("#web_loading div").fadeOut(500); 
   }); 
  }); 
 });
// ]]></script>
<style>
#web_loading{
z-index:99999;
width:100%;
}
#web_loading div{
width:0;
height:5px;
background:#FF9F15;
}
</style>

看完了這篇文章，相信你對(duì)“如何使用純CSS和jQuery實(shí)現(xiàn)在頁(yè)面頂部顯示的進(jìn)度條效果”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！