参考 http://www.lanrenzhijia.com/jquery/4121.html
demo下载
<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文件.
1 2 | <link rel="stylesheet" href="path/to/jquery.lineProgressbar.css"><script src="path/to/js/circleMagic.js"></script> |
使用一个<div>作为进度条的容器。
1 | <div id="progressbar1"></div> |
在页面DOM元素加载完毕之后，通过下LineProgressbar()方法来初始化该jquery进度条插件。
1 | $(‘#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%‘ |
简单的jquery进度条插件LineProgressbar.js
原文地址：https://www.cnblogs.com/dare/p/9046352.html