可自定义刻度jQuery进度条是一款可以自定义进度条刻度圆点的数量，大小，颜色等属性，并且可以通过CSS来控制圆点的外观样式。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
<divclass="htmleaf-container"><divid="container"><divclass="padded"><divid="PRogressHolder"></div><divid="progressReset">生成随机的风格</div></div></div></div><scriptsrc="js/jquery-2.1.1.min.js"type="text/javascript"></script><scriptsrc="js/jquery.progressdots.js"></script><scriptsrc="js/prism.js"></script><script>$(document).ready(function() {
createSpots(1);
$("#progressReset").click(function(event) {
event.preventDefault();
createSpots(1);
});functioncreateSpots(num) {for(vari=0; i<num; i++) {
options={
dotSize: random(10,20)+"px",
radius: random(1,7)*10+"%"};
randomHtml="";if(Math.random()<0.5) {
options.randomColors=true;
randomHtml+="\n\trandomColors:"+options.randomColors+", //use random colors";
}else{
options.dotColor=randomColor();
randomHtml+="\n\tdotColor: '"+options.dotColor+"', //set dot color (#HEX)";
}if(Math.random()<0.3) {
options.progress=true;
options.percent=random(5,100);
randomHtml+="\n\tprogress: true, //enable progress";
randomHtml+="\n\tpercent:"+options.percent+", //set initial percentage";
}else{
options.numDots=random(3,15);
randomHtml+="\n\tnumDots:"+options.numDots+", //number of dots";
}
string="$( '#progressBox' ).dottify({\
\n\tdotSize: '"+options.dotSize+"', //set size of dot"+randomHtml+"\n\tradius: '"+options.radius+"' //set dot corner radius\
\n});";var$container=$("<div class='swoopContainer'></div>").data("setupString", JSON.stringify(string));
$("#progressHolder").append($container.hide());
$container.slideDown(function() {
$(this).css({ overflow:"hidden"});
});
$container.click(function() {
$(".swoopContainer").removeClass("selected");
$(this).addClass("selected");
$("#jsContents").html(JSON.parse($(this).data("setupString")));
Prism.highlightAll();
});
$container.dottify(options);
$("#jsContents").html(string);
Prism.highlightAll();
}
$(".swoopContainer").removeClass("selected");
$(".swoopContainer").last().addClass("selected");
}functionrandomColor() {return'#'+Math.floor(Math.random()*16777215).toString(16);
}functionrandom(min, max) {returnMath.floor(Math.random()*((max-min)+min)+min);
}
});</script>
via：http://www.w2bc.com/article/60080