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

基于SVG的轻量级js圆形进度条插件

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

基于SVG的轻量级js圆形进度条插件

简介

使用该圆形进度条需要引入circles.js（或circles.min.js）文件。

```html
<script src="js/circles.min.js"></script>       
```       
 HTML结构
该圆形进度条的HTML结构使用一个空的div即可。

```html
<div class="circle" id="circles-1"></div>  
```    
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该圆形进度条插件。id参数必须和容器中的id相同。

```html
var myCircle = Circles.create({
  id:                  'circles-1',
  radius:              60,
  value:               43,
  maxValue:            100,
  width:               10,
  text:                function(value){return value + '%';},
  colors:              ['#D3B6C6', '#4B253A'],
  duration:            400,
  wrpClass:            'circles-wrp',
  textClass:           'circles-text',
  valueStrokeClass:    'circles-valueStroke',
  maxValueStrokeClass: 'circles-maxValueStroke',
  styleWrapper:        true,
  styleText:           true
});          
```     
##### 配置参数
该圆形进度条的可用配置参数如下：

- id：包裹圆形进度条的DOM元素的ID。
- radius：圆形进度条的半径。
- value：圆形进度条的初始值，默认值为0。
- maxValue：圆形进度条的最大值，默认值为100。
- width：圆环的宽度，如果没有指定，值为10。
- colors：一个颜色数组，第一个颜色是整个圆环的颜色，如果没有指定，值为['#EEE', '#F00']。也可以是rgba()值，例如['rgba(255,255,255,0.25)', 'rgba(125,125,125,0.5)']。
- duration：动画的持续时间，默认为500.如果传入0或null，就不会有动画效果。
- wrpClass：包裹整个圆形进度条的元素的class名称。
- textClass：圆形进度条中文本的class名称。
- valueStrokeClass：用于value值的SVG path元素的class名称。
- maxValueStrokeClass：用于maxValue值的SVG path元素的class名称。
- styleWrapper：是否在包裹元素上添加行内(inline)样式，默认值为true。
- styleText：是否在文本元素上添加行内(inline)样式，默认值为true。
- text：圆形简单中间显示的文本。不设置文本可以设置为null。它也可以是一个函数，函数的返回值将显示在圆形进度条的中间，例如：
```html
// Example 1
function(currentValue) {
  return '$'+currentValue;
}
// Example 2
function() {
  return this.getPercent() + '%';
}  
```
#####  API
```html
myCircle.updateRadius(Number radius)
```
通过给定的radius更新圆形进度条，例如制作响应式的圆形进度条。

```html
myCircle.updateWidth(Number width)
```
通过给定的width更新圆形进度条。

```html
myCircle.updateColors(Array colors)
```
更新圆形进度条的颜色。

```html
myCircle.update(Number value [, Number duration])
```
为圆形进度条设置值。动画将使用duration毫秒来执行。如果duration没有指定，在构造函数中设置的duration值将被使用。如果不需要duration值，设置为0。

```html
myCircle.update(Boolean force)
```
如果force设置为true，则强制重绘圆形进度条。

```html
myCircle.getPercent()
```
返回基于当前值和最大值的圆形进度条的百分比值。

```html
myCircle.getValue()
```
返回圆形进度条的值。

```html
myCircle.getMaxValue()
```
返回圆形进度条的最大值。

```html
myCircle.getValueFromPercent(Number percentage)
```
返回基于percentage和最大值的圆形进度条的百分比值。

```html
myCircle.htmlifyNumber(Number number[, integerPartClass, decimalPartClass])
Returned HTML representation of given number with given classes names applied on tags。
```

#####  CSS样式
圆形进度条的样式被指定为内联模式，你可以通过下面的CSS class类来覆盖要设置的样式。

- circles-wrp：包裹整个圆形进度条的元素的class类。
- circles-text：包裹文本的容器的class类。
- circles-integer：包裹在原点符号之前的文本的容器的class类。
- circles-decimals：包裹小数部分文本的容器的class类。
#####  浏览器兼容
桌面设备浏览器：

- Firefox 3+
- Chrome 4+
- Safari 3.2+
- Opera 9+
- IE9 +
移动设备浏览器：

- iOS Safari 3.2+
- Android Browser 3+
- Opera Mobile 10+
- Chrome for Android 18+
- Firefox for Android 15+

web299.com

基于SVG的轻量级js圆形进度条插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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