基础用法
/** * 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);