浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery自动完成 2017-01-03

人气14464

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


ClassyLoader是一款轻量级跨浏览器的jQuery圆形进度条插件。该圆形进度条基于HTML5 canvas来制作,使用简单,进度条的动画效果非常平滑。通过它你可以在你的网站上制作出非常漂亮的圆形进度条效果。它的特点还有:

  • 圆形进度条的动画效果非常漂亮
  • 跨浏览器
  • 轻量级和高度可定制
  • 使用简单

使用方法

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

<script src='js/jquery.min.js'></script>
<script src='js/jquery.classyloader.min.js'></script>   
              
HTML结构

该圆形进度条基于<canvas>元素来制作,可以简单的通过一个空的<canvas>元素来实现。

<canvas class="loader"></canvas>                
              
初始化插件

在页面DOM元素加载完毕之后,可以通过ClassyLoader()方法来初始化该圆形进度条。

$('.loader').ClassyLoader();                
              

如果你需要手动触发圆形进度条,可以这样做:

var loader = $('.loader').ClassyLoader({
    animate: false,
    percentage: 0
});                
              

上面的代码会将圆形进度条的进度显示为0%,但是不会发生动画。你可以通过设置需要的百分比数和draw()方法来使它产生动画效果

$('.customtrigger').on('click', function() {
    loader.setPercent(100).draw();
});                
              

或者使用下面的方法,两种方法是等效的:

$('.customtrigger').on('click', function() {
    loader.draw(100);
});                
              

配置参数

  • width:圆形进度条的宽度,单位像素,默认值200。
  • height:圆形进度条的高度,单位像素,默认值200。
  • animate:圆形进度条是否动画,默认值为true
  • percentage:圆形进度条的百分比值,0-100之间,默认值为100。
  • speed:一次动画循环的时间,单位毫秒,默认值为1。
  • showRemaining:是否显示剩余的百分比,默认值为true
  • start:开始的角度,默认值为left,可选值有:leftrighttopbottom
  • 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():返回圆形进度条的百分比值。

查看演示
下载资源:4
下载资源
错误提交:

格式:zip 大小:74.30KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2043.html 非特殊说明,本文版权归原作者所有,转载请注明出处
基于canvas的jQuery圆形进度条插件

我当前G币余额:0 已下载次数:4

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有4 评论)