純CSS和jQuery實(shí)現(xiàn)的在頁(yè)面頂部顯示的進(jìn)度條效果2例(仿手機(jī)瀏覽器進(jìn)度條效果)

一、純CSS實(shí)現(xiàn)
昨天在網(wǎng)上閑逛時(shí),看到一個(gè)博客的頁(yè)面最頂部有一個(gè)進(jìn)度條特效,感覺挺好的,就分析了一下代碼,找出了其中的關(guā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>
相關(guān)文章
基于jquery實(shí)現(xiàn)的Flash加載遠(yuǎn)程圖片帶進(jìn)度條顯示效果
這是一個(gè)Flash結(jié)合jquery實(shí)現(xiàn)的特效,加載遠(yuǎn)程圖片顯示進(jìn)度條,對(duì)進(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è)定走動(dòng)速度限定時(shí)間的jQuery動(dòng)態(tài)進(jìn)度條效果插件
通過(guò)此插件可以很容易的實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條,可以設(shè)定進(jìn)度條走動(dòng)的速度,可以限定時(shí)間2013-09-12帶有進(jìn)度條索引按鈕的OPPO官方商城jquery焦點(diǎn)圖
一款來(lái)自O(shè)PPO手機(jī)官方網(wǎng)站的jquery焦點(diǎn)圖,帶有進(jìn)度條,索引按鈕,自動(dòng)輪播切換特效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)滑動(dòng)2014-03-11jquery/CSS3實(shí)現(xiàn)的相冊(cè)圖片加載進(jìn)度條特效源碼
這是一款jQuery+CSS3實(shí)現(xiàn)的相冊(cè)圖片加載進(jìn)度條特效源碼,加載圖片過(guò)程中在頁(yè)面頂部出現(xiàn)藍(lán)色的進(jìn)度條,右上角有不停轉(zhuǎn)動(dòng)的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-17jquery實(shí)現(xiàn)3D立體效果的動(dòng)畫加載進(jìn)度條源碼
這是一款基于jquery實(shí)現(xiàn)3D立體效果的動(dòng)畫加載進(jìn)度條源碼。這里展示了多種顏色風(fēng)格的3D進(jìn)度條效果。具有非常強(qiáng)的立體感。適合做手機(jī)端使用2015-11-03基于jQuery實(shí)現(xiàn)滑動(dòng)加載進(jìn)度條特效源碼
基于jQuery實(shí)現(xiàn)滑動(dòng)加載進(jìn)度條特效源碼是一款簡(jiǎn)單實(shí)用的動(dòng)態(tài)進(jìn)度條加載特效代碼,支持更改顏色以及用圖片替代,本段代碼簡(jiǎn)單易懂,喜歡的小伙伴直接下載哦2015-12-20