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

基于canvas的jQuery圆形进度条插件

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

简介

使用该圆形进度条插件需要引入jQuery和jquery.classyloader.min.j文件。

```html
<script src='js/jquery.min.js'></script>
<script src='js/jquery.classyloader.min.js'></script>   
```
#####  HTML结构
该圆形进度条基于canvas元素来制作，可以简单的通过一个空的canvas元素来实现。

```html
<canvas class="loader"></canvas>       
```         
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过ClassyLoader()方法来初始化该圆形进度条。

```html
$('.loader').ClassyLoader();                
```
如果你需要手动触发圆形进度条，可以这样做：

```html
var loader = $('.loader').ClassyLoader({
    animate: false,
    percentage: 0
});          
```      
上面的代码会将圆形进度条的进度显示为0%，但是不会发生动画。你可以通过设置需要的百分比数和draw()方法来使它产生动画效果

```html
$('.customtrigger').on('click', function() {
    loader.setPercent(100).draw();
}); 
```               
或者使用下面的方法，两种方法是等效的：

```html
$('.customtrigger').on('click', function() {
    loader.draw(100);
});   
```             
#####  配置参数 配置参数
- width：圆形进度条的宽度，单位像素，默认值200。
- height：圆形进度条的高度，单位像素，默认值200。
- animate：圆形进度条是否动画，默认值为true。
- percentage：圆形进度条的百分比值，0-100之间，默认值为100。
- speed：一次动画循环的时间，单位毫秒，默认值为1。
- showRemaining：是否显示剩余的百分比，默认值为true。
- start：开始的角度，默认值为left，可选值有：left，right，top和bottom。
- fontFamily：百分比数值的字体，默认值为Helvetica。
- showText：是否显示百分比数值文本，默认值为true。
- fontSize：百分比数值的字体尺寸，单位像素，默认值50px。
- roundedLine：是否使用圆角，单位像素，默认值false。
- diameter：圆形进度条的直径，单位像素，默认值80。
- fontColor：百分比文本的颜色，可以是任何CSS颜色，hex，rgb，rgba，hsl，hsla。默认值为rgba(25, 25, 25, 0.6)。
- lineColor：圆形进度条的线条颜色，默认值为rgba(55, 55, 55, 1)。
- remainingLineColor：剩余百分比的线条颜色（如果showRemaining为true）。默认值为rgba(55, 55, 55, 0.4)。
- lineWidth：圆形进度条的线条宽度，默认值为5。
#####  方法
- show()：初始化显示圆形进度条，但是不会动画。
- draw()：使进度条动画到指定的进度。
- setPercent()：设置圆形进度条的百分比值，你可以在它后面使用draw()方法使进度条动画起来。
- getPercent()：返回圆形进度条的百分比值。

web299.com

基于canvas的jQuery圆形进度条插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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