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

HTML5 SVG轻量级jQuery进度条插件

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

简介

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

```html
<script src="js/jquery.min.js"></script> 
<script src="js/jquery.progress.js"></script>   
```            
#####  HTML结构
该jQuery进度条的HTML结构使用一个svg元素来制作。
```html

```html
var progress = $("#container").Progress({
  percent: 20,
  width: 180,
  height: 40,
  fontSize: 16
});      
```         
#####  配置参数
该进度条插件的可用配置参数如下：

```html
var settings = {
  width: 90, // the width of bar
  height: 20, // the height of bar
  percent: 0, // the current percent
  backgroundColor: '#555', // the color of the background
  barColor: '#d9534f', // the color of the bar
  radius: 4, // the radius of the corner
  fontSize: 12, // the font size
  fontColor: '#fff', // the color of the number
  increaseSpeed: 1, // the increase length
  animate: true // whether to use animation
};       
```      
- width：进度条的宽度。
- height：进度条的高度。
- percent：进度条的当前百分比。
- backgroundColor：进度条的背景色。
- barColor：进度条的颜色。
- radius：进度条圆角的半径。
- fontSize：字体大小。
- fontColor：字体颜色。
- increaseSpeed：进度条增加的长度。
- animate：是否动画。

web299.com

HTML5 SVG轻量级jQuery进度条插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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