純CSS和jQuery實(shí)現(xiàn)的在頁面頂部顯示的進(jìn)度條效果2例（仿手機(jī)瀏覽器進(jìn)度條效果）
發(fā)布時(shí)間：2014-04-16 14:36:12 作者：佚名 
我要評論
我要評論這篇文章主要介紹了純CSS和jQuery實(shí)現(xiàn)的在頁面頂部顯示的進(jìn)度條效果2例，仿手機(jī)瀏覽器進(jìn)度條效果，分別使用純CSS和jQuery實(shí)現(xiàn),需要的朋友可以參考下
一、純CSS實(shí)現(xiàn)
昨天在網(wǎng)上閑逛時(shí)，看到一個(gè)博客的頁面最頂部有一個(gè)進(jìn)度條特效，感覺挺好的，就分析了一下代碼，找出了其中的關(guān)鍵部份，使用純CSS實(shí)現(xiàn)的，給大家分享一下。
復(fù)制代碼
代碼如下:<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è)在頁面頂部顯示的進(jìn)度條效果，像在智能手機(jī)上瀏覽網(wǎng)頁一樣，手機(jī)上的瀏覽器進(jìn)度條一般都在屏幕頂部，一條極細(xì)的小線條，當(dāng)頁面加載的時(shí)候，它就不斷的加載顯示進(jìn)度，本網(wǎng)頁進(jìn)度條特效與此十分相似，基于jquery插件實(shí)現(xiàn)的效果。
復(fù)制代碼
代碼如下:<title>頁面頂部顯示的進(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>
相關(guān)文章
基于jquery實(shí)現(xiàn)的Flash加載遠(yuǎn)程圖片帶進(jìn)度條顯示效果
這是一個(gè)Flash結(jié)合jquery實(shí)現(xiàn)的特效，加載遠(yuǎn)程圖片顯示進(jìn)度條，對進(jìn)度條可方便的定義，代碼內(nèi)loadBg為背景DIV，loading為加載條DIV，loadText為百分比DIV；加載完畢后回調(diào)2010-05-30
基于 jQuery的JProgressBar Demo文件加載進(jìn)度條演示效果1.0
JProgressBar 1.0加載進(jìn)度條演示Demo文件，關(guān)于JProgressBar類的用法： * 創(chuàng)建一個(gè)進(jìn)度條2011-06-23
可設(shè)定走動速度限定時(shí)間的jQuery動態(tài)進(jìn)度條效果插件
通過此插件可以很容易的實(shí)現(xiàn)動態(tài)進(jìn)度條，可以設(shè)定進(jìn)度條走動的速度，可以限定時(shí)間2013-09-12
帶有進(jìn)度條索引按鈕的OPPO官方商城jquery焦點(diǎn)圖
一款來自O(shè)PPO手機(jī)官方網(wǎng)站的jquery焦點(diǎn)圖，帶有進(jìn)度條，索引按鈕，自動輪播切換特效2014-02-18
汽車網(wǎng)站jquery帶進(jìn)度條焦點(diǎn)圖可以實(shí)現(xiàn)全屏的效果
一款帶進(jìn)度條的焦點(diǎn)圖片特效jquery插件，圖片作成很大時(shí)看上去可以實(shí)現(xiàn)全屏的效果，進(jìn)度條上還帶有一個(gè)小圖標(biāo)跟隨焦點(diǎn)滑動2014-03-11
jquery/CSS3實(shí)現(xiàn)的相冊圖片加載進(jìn)度條特效源碼
這是一款jQuery+CSS3實(shí)現(xiàn)的相冊圖片加載進(jìn)度條特效源碼，加載圖片過程中在頁面頂部出現(xiàn)藍(lán)色的進(jìn)度條，右上角有不停轉(zhuǎn)動的loading效果，可以點(diǎn)擊按鈕加載更多圖片，結(jié)合jQue2014-07-24
基于jquery實(shí)現(xiàn)的帶有數(shù)字顯示的加載進(jìn)度條特效源碼
基于jquery實(shí)現(xiàn)的帶有數(shù)字顯示的加載進(jìn)度條特效源碼是一段小巧的 JavaScript 插件，運(yùn)行流暢，反應(yīng)速度靈敏，是一段非常優(yōu)秀的特效源碼2014-10-17
jquery實(shí)現(xiàn)3D立體效果的動畫加載進(jìn)度條源碼
這是一款基于jquery實(shí)現(xiàn)3D立體效果的動畫加載進(jìn)度條源碼。這里展示了多種顏色風(fēng)格的3D進(jìn)度條效果。具有非常強(qiáng)的立體感。適合做手機(jī)端使用2015-11-03
基于jQuery實(shí)現(xiàn)滑動加載進(jìn)度條特效源碼
基于jQuery實(shí)現(xiàn)滑動加載進(jìn)度條特效源碼是一款簡單實(shí)用的動態(tài)進(jìn)度條加載特效代碼，支持更改顏色以及用圖片替代，本段代碼簡單易懂，喜歡的小伙伴直接下載哦2015-12-20
