自定义尺度jQuery进度条和插件

这个简短的教程progressdots是一个jQuery插件，可以自定义进度条规模动画。与jQuery进度条插件，可以自定义进度条的属性，如数量、点的大小和颜色，你可以通过CSS控制点的外观。

请参阅以下效果图了解相关插件。
进度条的jQuery插件的使用需要jQuery的介绍，jquery.progressdots.js和jquery.progressdots.css文件。

HTML结构
然后使用一个空元素作为进度条的容器。
容器的宽度和高度是任意的。

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

# progressbox {边界：8px固体# DDD；宽度：80%；高度：40px；}

调用插件
加载页面DOM元素之后，可以使用以下方法初始化进度条插件

$（# progressbox）。Dottify（{斑点大小：'25px，
/ /套点分别大小：# f15c89，
/ /设定点的颜色（# HEX）进展：真的，
/ /使进度百分比：10， / /设置初始半径：40%的百分比
设置圆点角半径}；

高级选项

progressbox = $（var的# progressbox）。Dottify（{进展：真的，
/ /开始了对比：0）；（20）progressbox.setprogress }；
更新进度百分比
自定义校验jQuery进度条是一个属性，可以自定义进度条的数量、大小、颜色和其他属性，并可以通过CSS控制点的外观。

结果如下：

查看演示在线下载

HTML代码：

创建随机样式

$（文档）Ready（函数（）{）
CreateSpots（1）；
$（# progressreset）。Click（函数（事件）{
Event.preventDefault（）；
CreateSpots（1）；
}）；
功能createspots（NUM）{
对于（var i = 0；i <数字；i + +）{
选项= {
斑点大小：随机（10, 20）+PX
半径：随机（1, 7）* 10 + %
}；
randomhtml = ；
如果（Math.random）<<（0.5）{
options.randomcolors =真；
randomhtml = trandomcolors：
}
{其他
options.dotcolor =随机颜色（）；
randomhtml = tdotcolor：+ options.dotcolor +
}
如果（Math.random）<<（0.3）{
options.progress =真；
options.percent =随机（5, 100）；
randomhtml tprogress：真的， / / 进步=；
randomhtml = tpercent：
{人}
options.numdots =随机（3, 15）；
randomhtml = tnumdots：
}
字符串=$（' # progressbox）。Dottify（{
tdotsize：+ options.dotsize + ， / / +点尺寸
RandomHtml +
tradius：+ options.radius + / /套点圆角
}）；
VaR的容器=美元（美元）。数据（setupstring
$（# progressholder）。追加（$ container.hide（））；
container.slidedown美元（函数（）{（）
$（Css）；
}）；
container.click美元（函数（）{（）
$（。swoopcontainer）。RemoveClass（选择）；
$（这）。AddClass（选择）；
$（# jscontents）。Html（JSON.parse（$（this）。数据（setupstring ））））
Prism.highlightAll（）；
}）；
container.dottify美元（选项）；
$（# jscontents）。Html（字符串）；
Prism.highlightAll（）；
}
$（。swoopcontainer）。RemoveClass（选择）；
$（。swoopcontainer ），最后（）。AddClass（选择）；
}
函数的随机颜色（）{
返回的# + math.floor（数学。随机）（* 16777215），ToString（16）；
}
函数随机（最小，最大）{
返回math.floor（Math.random（）*（（（最大值-最小）+分钟）+分钟）；
}
}）；