如何使用纯CSS和jQuery实现在页面顶部显示的进度条效果

小编给大家分享一下如何使用纯CSS和jQuery实现在页面顶部显示的进度条效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

一、纯CSS实现

代码如下:

<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实现

一个在页面顶部显示的进度条效果，像在智能手机上浏览网页一样，手机上的浏览器进度条一般都在屏幕顶部，一条极细的小线条，当页面加载的时候，它就不断的加载显示进度，本网页进度条特效与此十分相似，基于jquery插件实现的效果。

代码如下:

<title>页面顶部显示的进度条效果</title>
<div id="web_loading"><div></div></div>
<script class="lazy" data-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>

看完了这篇文章，相信你对“如何使用纯CSS和jQuery实现在页面顶部显示的进度条效果”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网行业资讯频道，感谢各位的阅读！