W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
雖然現(xiàn)在網(wǎng)速都很快,不過由于我們的網(wǎng)站越來越復雜,有時打開一個大型網(wǎng)站難免會比較慢,如今用戶對網(wǎng)站的使用體驗的要求越來越高了,當網(wǎng)頁內(nèi)容加載緩慢的時候,就需要用到美觀的加載進度條告訴用戶還有內(nèi)容正在加載。本文篩選了多個精美的jquery進度條代碼素材供您參考使用下載,不過我們先來看下一個簡單的進度條效果是如何用jquery實現(xiàn)的?
實現(xiàn)效果:
進度條實現(xiàn)源碼:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery實現(xiàn)進度條</title>
<style>
.progressBar{width:200px;height:8px;border:1px solid #98AFB7;border-radius:5px;margin-top:10px;}
#bar{width:0px;height:8px;border-radius:5px;background:#5EC4EA;}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" rel="external nofollow" ></script>
<script type="text/javascript">
function progressBar(){
//初始化js進度條
$("#bar").css("width","0px");
//進度條的速度,越小越快
var speed = 20;
bar = setInterval(function(){
nowWidth = parseInt($("#bar").width());
//寬度要不能大于進度條的總寬度
if(nowWidth<=200){
barWidth = (nowWidth + 1)+"px";
$("#bar").css("width",barWidth);
}else{
//進度條讀滿后,停止
clearInterval(bar);
}
},speed);
}
</script>
</head>
<body>
<input type="button" value="開始" onclick="progressBar()" />
<div class="progressBar"><div id="bar"></div></div>
</body>
</html>
Percentage Loader
一款輕量的 jQuery 進度條插件,以百分比的形式呈現(xiàn)加載進度,同時顯示已加載的內(nèi)容大小。
帶播放暫停按鈕的進度條
Query帶播放暫停按鈕進度條是一款可以通過按鈕控制進度條是暫?;蚴遣シ艅赢嬏匦?。
百分比進度條動畫效果
3D立體進度條加載動畫特效
3D立體進度條加載動畫特效是一款基于html5+css3實現(xiàn)3D立體百分比進度條加載特效。
星球大戰(zhàn)水平進度條特效
星球大戰(zhàn)jQuery水平進度條特效是一款使用彩色霓虹效果,仿造星球大戰(zhàn)中的激光劍效果特效。
jQuery圓形進度條倒計時插件
jQuery HTML5 SVG進度條特效
jQuery HTML5 SVG進度條特效是一款實用的jQuery進度條插件。
提示:請通過本站的“HTML5 SVG輕量級jQuery進度條插件”部分來獲取更多關于jQuery HTML5 SVG進度條特效的信息!
網(wǎng)頁步驟流程進度條代碼
上傳進度條動畫代碼
可自定義刻度jQuery進度條
可自定義刻度jQuery進度條是一款可以自定義進度條刻度圓點的數(shù)量,大小,顏色等屬性,并且可以通過CSS來控制圓點的外觀樣式。
jQuery+CSS3進度條動畫特效
NumberProgressBar進度條
內(nèi)置進度條按鈕
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: