基础用法
/**
* percent取值范围:0~1
*/
var htmlStr_demo1=circleProcessBar({
percent: 0.7
});
$(".demo-1").html(htmlStr_demo1);
自定义大小
/**
*自定义进度条直径
*默认100,单位px
*/
var htmlStr_demo2=circleProcessBar({
percent: 0.7,
width:200
});
$(".demo-2").html(htmlStr_demo2);
/**
*自定义进度条线条宽度
*默认6,单位px
*/
var htmlStr_demo3=circleProcessBar({
percent: 0.7,
strokeWidth:10
});
$(".demo-3").html(htmlStr_demo3);
自定义颜色
/**
*自定义进度条颜色
*默认色值#52c41a
*/
var htmlStr_demo4=circleProcessBar({
percent: 0.7,
strokeColor:"#f44"
});
$(".demo-4").html(htmlStr_demo4);
/**
*自定义进度条背景色
*默认色值#f8f8f8
*/
var htmlStr_demo5=circleProcessBar({
percent: 0.7,
bgColor:"#ccc"
});
$(".demo-5").html(htmlStr_demo5);
文本颜色和字体大小
/**
*自定义文本颜色和字体大小
*默认色值#999
*默认字号14,单位px
*/
var htmlStr_demo6=circleProcessBar({
percent: 0.7,
fontColor:"#000",
fontSize:"20px"
});
$(".demo-6").html(htmlStr_demo6);
文本格式化
/**
*自定义文本显示
*默认格式 <数值>%
*/
var htmlStr_demo7=circleProcessBar({
percent: 0.7,
format: function(percent){
return "进度:"+percent * 100 + "%";;
}
});
$(".demo-7").html(htmlStr_demo7);
/**
*自定义100%时的文本显示
*默认显示 100%
*/
var htmlStr_demo8=circleProcessBar({
percent: 1,
format: function(percent){
if(percent===1){
return "<格式化之后的内容>";
}
}
});
$(".demo-8").html(htmlStr_demo8);