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

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

 12312  83  查看评论 (18)
基于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
});


相关插件-加载,圆边

jQuery数据加载遮罩层

显示“数据加载中”遮罩层,可全屏遮罩和对指定元素遮罩
  加载
 1663  10

jQuery动画进度条 实时显示进度百分比DEMO演示

jQuery动画进度条 实时显示进度百分比DEMO演示
  加载
 8409  36

jQuery预加载插件

jQuery Fadeloader的插件可以让你轻松实现预加载到您的网站或部分使用级联渐显效果来显示特定的内容块(例如,头> MENU>内容>页脚)
  加载
 25051  27

创造性的负载效应

13种页面加载特效
  加载
 2723  33

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

    Jus-like-Echo 0
    2017/8/11 10:57:02
    俊健在路上 0
    2017/6/30 17:32:09
    谁でも大好き 0
    2017/5/15 10:17:29

    感谢作者分享。

    回复
    小豆芽 0
    2017/3/31 19:16:11
    坚持 0
    2017/3/9 15:06:07
    魅影ゞ殺 0
    2017/2/28 9:38:13

    这个效果不错,学习了

    回复
    duobi多比 0
    2017/2/14 13:41:32
    中间的数字怎么 回复
    狗要绿豆冰! 0
    2017/2/9 20:50:24
    明月祭 0
    2016/12/21 14:12:50

    怎样调节大小

        洁白婚纱我爱的她*0
        2017/3/29 9:10:41

        听说回答他人提问获得jq

    回复
    Out of my mind 0
    2016/12/16 16:12:38

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

        小豆芽0
        2017/3/31 19:17:41

        可以用吗

    回复
取消回复