一个简单的jquery进度条示例_jquery
程序员文章站
2022-04-08 20:12:17
...
用jQuery实现的最简单的进度条,只有不到10行代码。样式可以直接忽略。(有一个图片需要自己找一下)
$(function(){
var i=0;
(function progressBar(){
i=i+1;
if(i>=101){
i=0;
}
$("#proc").animate({width:i+"%"},500);
$("#progressWord").text(i+"%");
setTimeout(progressBar,1500);
})();
});
.progress_out{
position:relative;
border:1px solid #3c4d60;
-webkit-box-shadow: #666 0px 0px 3px;
-moz-box-shadow: #666 0px 0px 3px;
box-shadow: #666 0px 0px 3px;
width:200px;
height:40px;
}
.progress_inner{
background-color: #DADAE4;
width: 100%;
height: 40px;
}
.progress_word{
position:absolute;
left:50%;
top:24%;
font-weight: bold;
}
[CSS]代码
复制代码 代码如下:
$(function(){
var i=0;
(function progressBar(){
i=i+1;
if(i>=101){
i=0;
}
$("#proc").animate({width:i+"%"},500);
$("#progressWord").text(i+"%");
setTimeout(progressBar,1500);
})();
});
[CSS]代码
复制代码 代码如下:
.progress_out{
position:relative;
border:1px solid #3c4d60;
-webkit-box-shadow: #666 0px 0px 3px;
-moz-box-shadow: #666 0px 0px 3px;
box-shadow: #666 0px 0px 3px;
width:200px;
height:40px;
}
.progress_inner{
background-color: #DADAE4;
width: 100%;
height: 40px;
}
.progress_word{
position:absolute;
left:50%;
top:24%;
font-weight: bold;
}
[HTML]代码
复制代码 代码如下:
0%
上一篇: html中关于头部标签的总结
下一篇: AngularJS之表格
推荐阅读
-
jQuery+vue.js实现的多选下拉列表功能示例
-
jQuery实现的中英文切换功能示例
-
jQuery实现适用于移动端的跑马灯抽奖特效示例
-
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
-
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
-
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
-
jquery 合并内容相同的单元格(示例代码)
-
jQuery中事件对象e的事件冒泡用法示例介绍
-
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
-
jQuery插件zTree实现单独选中根节点中第一个节点示例