参考 http://www.lanrenzhijia.com/jquery/4121.html http://www.lanrenzhijia.com/jquery/4121.html
demo 下载 https://download.csdn.net/download/t101lian/10418332
- <script src="js/jquery.lineProgressbar.js" type="text/javascript"></script>
- $(function(){
- $('#progressbar1').LineProgressbar({
- percentage: 50
- });
- $('#progressbar2').LineProgressbar({
- percentage: 25,
- fillBackgroundColor: '#1abc9c'
- });
- $('#progressbar3').LineProgressbar({
- percentage: 61,
- fillBackgroundColor: '#e67e22',
- height: '35px'
- });
- $('#progressbar4').LineProgressbar({
- percentage: 78,
- fillBackgroundColor: '#f1c40f',
- height: '65px',
- radius: '50px'
- });
- })
在页面中引入 jquery.lineProgressbar.CSS 和 jquery.lineProgressbar.js 文件.
使用一个 < div > 作为进度条的容器.
在页面 DOM 元素加载完毕之后, 通过下 LineProgressbar() 方法来初始化该 jquery 进度条插件.
$('#progressbar1').LineProgressbar();
LineProgressbar.js 进度条插件的可用配置参数有:
参数
定义进度条的宽度.
类型 | 默认值 | 描述 | |
percentage | int | null | 定义进度条的百分比数。 |
ShowProgressCount | boolean | true | 定义是否显示百分比数值。 |
duration | int | 1000 | 定义进度条动画的速度。默认为 1000 毫秒。可以使用整数值孟获关键字:slow 或 fast。 |
fillBackgroundColor | string | ‘#3498db‘ | 定义进度条的背景填充色。 |
backgroundColor | string | ‘#EEEEEE‘ | 定义进度条的背景色。 |
radius | string | ‘0px‘ | 定义进度条的圆角。 |
height | string | ‘10px‘ | 定义进度条的高度。 |
width | string | ‘100%‘ |
来源: http://www.bubuko.com/infodetail-2603574.html