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

所属分类:UI-加载,圆边

 9328  72  查看评论 (8)
基于SVG的轻量级js圆形进度条插件 ie兼容9

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

<script src="js/circles.min.js"></script>


HTML结构

该圆形进度条的HTML结构使用一个空的<div>即可。

<div class="circle" id="circles-1"></div>


初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该圆形进度条插件。id参数必须和容器中的id相同。

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
});


相关插件-加载,圆边

网站顶部显示预加载进度条插件preload.js(原创)

网站顶部显示预加载进度条插件
  加载
 7516  69

jQuery Css进度条

jQuery+CSS+圆角DIV
  加载
 3265  25

jquery播放进度条插件,可拖动

jquery插件播放进度条,可以拖动,可以控制,可设置时间
  加载
 2068  16

jQuery进度条插件jqbar

柱状图动态显示工具
  加载
 5883  50

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币

    明月祭0
    2016/12/21 14:12:50
    Out of my mind0
    2016/12/16 16:12:38

    怎么调整加载的那层圈的进度?

    回复
    Alcedo0
    2016/11/4 8:11:58
    不错,效果很棒 回复
    Cong0
    2016/5/26 10:05:53
    将军0
    2016/4/20 23:04:02
    逆光0
    2016/3/24 16:03:15
    Grace0
    2015/12/27 20:12:59

    就是想做这种效果,感谢哇~

    回复
    逍遥法外0
    2015/12/25 12:12:29
取消回复
    PROMULGATOR

    Nemo

    火星