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

基于SVG的扁平风格圆形进度条插件

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

基于SVG的扁平风格圆形进度条插件

简介

使用该圆形进度条需要引入circleDonutChart.js文件。

```html
<script type="text/javascript" src="circleDonutChart.js"></script>   
```             
#####  HTML结构
你可以使用一个空的div元素来制作圆形进度条。

```html
<div id="example1"></div>   
```            
#####  初始化插件
要制作圆形进度条，可以使用下面的方法来实例化一个circleDonutChart对象。

```html
var circle = new circleDonutChart('myChartTitle');            
```
“myChartTitle”是div容器的ID号，在这个容器中将生成SVG图形。

#####  方法
该插件为进度条提供了下面的一些方法：

|  方法 |描述   |
| ------------ | ------------ |
|draw|基于给定的参数进行绘制|
|draw (after first draw)|基于给定的参数进行绘制，省略颜色参数|
|setValue|设置值，不会使进度条动画|
|getValue|返回实际值|
|delete|删除圆形进度条对象|
|reload|重新加载进度条对象并用默认参数初始化它|
#####  配置参数
下面的绘制参数可以传入到draw方法中。

```html
circle.draw({
    end:90,
    start:0,
    maxValue:100, 
    titlePosition:"outer-top", 
    titleText:"Consumption", 
    outerCircleColor:'#0085c8', 
    innerCircleColor:'#909081'
});                
        
```      
|  参数 |描述   |
| ------------ | ------------ |
|start|开始值，如果进度条已有该状态会被忽略|
|end|结束值（强制）|
|outerCircleColor|外圆的颜色|
|innerCircleColor|内圆的颜色|
|textColor|文本的颜色|
|animationSpeed = 0|不会产生动画效果|
|animationSpeed = 1|正常的动画速度|
|scaling|缩放值，1表示正常|
|size|进度条的大小，单位像素|
|getValue()|获取进度条的值|
|setValue()|设置进度条的值|
|unitText|设置显示的数字的单位|
|maxValue|设置非100%的最大值|
|titleText|进度条的标题（在inner-bottom 和 inner-top中应少于12个字符）|
|titlePosition|标题的显示位置： ["outer-bottom"、 "outer-top"、 "inner-bottom" 、 "inner-top"]|
|titleColor|标题的颜色|

web299.com

基于SVG的扁平风格圆形进度条插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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