当前位置：首页 > 网页特效 > 进度条

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

分类：进度条日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<script src="jquery.min.js"></script> 
<script src="jquery.progressdots.js"></script> 
<link href="jquery.progressdots.css" rel="stylesheet">  
```               
#####  HTML结构
然后使用一个空的div元素来作为进度条的容器。容器的宽度和高度任意。

```html
<div id='progressBox'></div>            
```
#####  CSS样式
为进度条容器设置一些基本样式，指定它的宽度和高度。
```html

#progressBox  {
    border: 8px solid #DDD;
    width: 80%;
    height: 40px;
}  
```           
#####  调用插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该进度条插件。

```html
$( '#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         
});                
```
#####  高级选项
```html
var progressBox = $( '#progressBox' ).dottify({ 
  progress:true, //start with progressbar on
  percent:0
}); 
       
progressBox.setProgress( 20 ); //update progress percentage   
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果