Progressdots是一个jQuery进度条插件，可以自定义缩放动画。有了这个jQuery进度条插件，可以自定义进度条刻度点的数量、大小、颜色等属性，通过CSS控制点的外观样式。

相关插件请看下面的渲染图。

jquery进度条插件需要引入jQuery、jquery.progressdots.js和jquery.progressdots.css文件。

script src=' http : jquery . min . js '/script script src=' http 3360 jquery . progress dots . js '/script link href=' jquery . progress dots . CSS ' rel='样式表' html结构

然后使用一个空的div元素作为进度条的容器。

容器的宽度和高度是任意的。

Div id='progressBox'/div为进度条容器设置一些基本样式，并指定其宽度和高度。

# progressBox { border: 8px固态# DDD；宽度：80%；高度： 40px；}调用插件

加载页面DOM元素后，可以通过以下方法初始化进度条插件

$('#progressBox ')。dottify({ dotSize: '25px '，//设置dotColor: '#f15c89 '，//设置dot color(# HEX)progress : true，//启用进度百分比： 10，//设置初始百分比半径： ' 40% '//设置点角半径})；高级选项

var progressBox=$('#progressBox ')。dottify({ progress:true，//以progressbar on percent:0 }开始)；progress box . SetProgress(20)；//更新进度百分比可自定义刻度jQuery进度条可以自定义进度条刻度点的数量、大小、颜色等属性，并可以通过CSS控制点的外观样式。

效果图如下：

查看演示在线下载

Html代码：

div class=' htmleaf-container ' div id=' container ' div class=' padded ' div id=' progress holder '/div div id=' progress reset '生成随机的风格/div /div /div脚本src=' http : js/jquery-2。1 .1 .量滴js ' type=' text/JavaScript '/脚本脚本src=' http : js/jquery。进步点。js /脚本脚本src=' http : js/prism。js /脚本$(文件).ready(function(){ createPots(1)；$('#progressReset ').点击(功能(事件){事件。prevent default()；创建点(1);});函数创建pots(num){ for(var I=0；I NuMi){ options={ dot size : random(10，20) 'px '，radius: random(1，7)* 10 ' % ' }；randomHtml=if(数学。random()0.5){ options。randomcolors=truerandomHTMl=' n transdom colors 3360 '选项。randomcolors '，//使用随机颜色；} else { options。DotColor=随机颜色()；randomHtml=' n tdotcolor : ' '选项。点颜色' '，//设置点颜色(# HEX)'；} if(数学。random()0.3){ options。进步=真；options.percent=random(5，100)；randomHtml=' n t进度： true，//启用进度；randomHtml=' n t百分比： '选项。百分比'，//设置初始百分比；} else { options.numDots=random(3，15)；randomHtml=' n tnumdots 3360 '选项。' numdots '，//点数；}字符串='$('#progressBox ').dottify({ n tdotsize3360 ' '选项。点大小' '，//设置点的大小randomHtml ' n tradiu 3360 ' '选项。半径' '//设置点的角半径 n })；";var $ container=$(' div class='俯冲容器'/div ').数据(' setupString '，JSON。stringify(string))；$('#progressHolder ').追加($ container。hide())；$container.slideDown(函数(){ $(此)).CSS({溢出： '隐藏' })；});$container.click(function () { $(')).俯冲容器')。removeClass(“”选定');$(这个)。addClass(')选定');$('#jsContents ').html(JSON。解析()($(this)).数据(' SetupString ')；棱镜。突出显示all()；});$container.dottify(选项);$('#jsContents ').html(字符串);棱镜。突出显示all()；} $('.俯冲容器')。removeClass(“”选定');$('.俯冲容器')。最后()。addClass(')选定');}函数randomColor(){ return ' # '数学。地板(数学。random()* 16777215).toString(16)；}函数随机(最小，最大){返回数学。地板(数学。random()*((max-min)min)min)；} });/script