基础用法

/**
* 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);