通用属性:
语法:$(selector).Circle({parameter}) |
||||
参数 | 说明 | 可选值 | 类型 | 默认值 |
---|---|---|---|---|
type |
进度条类型 | circle (圆环),level (水平) |
String | circle |
bgColor |
底部背景色 | - | String | '#F8F8F8' |
cirColor |
进度条颜色 | - | String | '#FFAF24' |
value |
进度条百分比 | 1-100 | Number | - |
textColor |
百分比字体颜色 | - | String | '#f37b1d' |
textSize |
百分比字体大小 | - | Number | 20 |
lineCap |
进度条两端类型 | butt (平滑);round (圆形线帽) |
String | round |
size |
环形进度条半径 或 水平进度条的长度 | - | Number | 90 |
lineWidth |
环形进度条宽度 或 水平进度条的高度 | - | Number | 24 |
speed |
进度条进行速度 | 1-10 | Number | 1 |
shadow |
阴影 | - | Boolean | false |
position |
进度条在画布显示位置 | top ,center ,bottom |
String | center |
gradient |
是否开启线性渐变 | - | Boolean | false |
startColor |
线性渐变开始颜色 | - | String | '#f60' |
endColor |
线性渐变结束颜色 | - | String | '#2495ff' |
环形进度条:
语法:$(selector).Circle({parameter}) |
||||
参数 | 说明 | 可选值 | 类型 | 默认值 |
---|---|---|---|---|
open |
进度条开始点 | top ,bottom ,between |
String | top |
tips |
是否显示提示文字 | - | Boolean | true |
tipsText |
提示文字 | - | String | - |
tipsColor |
提示文字颜色 | - | String | '#f37b1d' |
tipsSize |
提示文字大小 | - | Number | 24 |
tipsUnit |
是否显示提示文字的单位 | - | Boolean | true |
tipsPosition |
提示文字定位 | top ,center ,bottom |
String | center |
tipsPositionFill |
提示文字位置补位 | - | Number | 0 |
环形进度条:
语法:$(selector).Circle({parameter}) |
||||
参数 | 说明 | 可选值 | 类型 | 默认值 |
---|---|---|---|---|
textLeft |
水平进度条百分比距离左边的值 | - | String | 30 |
注:以上所有参数都可当做"data
"自定义属性使用 例:data-vlue="80"