可自定义刻度动画的jQuery进度条插件

progressdots是一款可自定义刻度动画的jQuery进度条插件。通过该jQuery进度条插件你可以自定义进度条刻度圆点的数量，大小，颜色等属性，并且可以通过CSS来控制圆点的外观样式。

使用方法

使用该jQuery进度条插件需要引入jquery，jquery.progressdots.js和jquery.progressdots.css文件。

<script src="jquery.min.js"></script> 
<script src="jquery.progressdots.js"></script> 
<link href="jquery.progressdots.css" rel="stylesheet">                 
              

HTML结构

然后使用一个空的<div>元素来作为进度条的容器。容器的宽度和高度任意。

<div id='progressBox'></div>            
              

CSS样式

为进度条容器设置一些基本样式，指定它的宽度和高度。

#progressBox  {
    border: 8px solid #DDD;
    width: 80%;
    height: 40px;
}             
              

调用插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该进度条插件。

$( '#progressBox' ).dottify({             
  dotSize: '25px', //set size of dot
  dotColor: '#f15c89', //set dot color (#HEX)
  progress: true, //enable progress
  percent: 10, //set initial percentage
  radius: '40%' //set dot corner radius         
});                
              

高级选项

var progressBox = $( '#progressBox' ).dottify({ 
  progress:true, //start with progressbar on
  percent:0
}); 
      
progressBox.setProgress( 20 ); //update progress percentage