登录注册

jQuery渐变进度条插件

插件特效
2026-07-26 01:06 3 次浏览 • 0 次下载 2.0KB
jQuery渐变进度条插件

更新时间：2019-09-25 22:27:16

更新说明：增加进度条显示动画，添加进度条动态loading效果

1
2
3
4
5
6
7
8
9
10
11
12
$('#progress-container2').initData({
height: 6,
percent: 80,
isAuto: true //新增动画效果，true为显示动画
})
mAutoPlay($('#progress-container'), mPercent, { height: 10 }) //动态loading方法
/*
* @params （mAutoPlay参数说明，从左至右）
* el: 进行自动动画的dom元素
* percent： 当前进度（动态变化）
* m_obj: 进度条高度，背景色参数 例： {height: 10, bgStartColor: '#feea4d', bgEndColor: '#ff3d00'}
*/

更新时间：2019-09-23 21:58:45

使用方法

引入progress.js文件和progress.css文件，

然后在进度条显示的地方加入一个div标签，然后调用初始化方法initData()即可，如插件中的例子：

css

1
2
3
4
5
6
7
.content{
width: 800px;
margin: 50px auto;
}
.content>div{
margin-top: 50px;
}

html

1
2
3
4
5
6
<div >
<div id="progress-container"></div>
<div id="progress-container1"></div>
<div id="progress-container2"></div>
<div id="progress-container3"></div>
</div>

js

1
2
3
4
$('#progress-container').initData({
height: 10,
percent: 50
})
评论