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

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

 40130  382  查看评论 (24)
分享到微信朋友圈
X
基于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
});


相关插件-加载,圆边

带刻度的进度条

html5 CSS3渐变进度条动画效果
  加载
 28868  288

js环形进度条

js环形进度条,再也不怕js了
  加载
 59724  505
  加载
 32263  343

jquery.Loading

8种fakeloader页面加载效果代码,支持7种效果和自定义图片,兼容主流浏览器!
  加载
 59237  412

讨论这个项目(24)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    qiwanglove 0
    2019/3/9 16:30:18
    ink-w 0
    2018/12/26 16:32:09
    【Mi2】up ㄊ 0
    2018/8/1 16:19:42
    好用是好用,,可是中间的数字想用百分比的显示怎么办?又想加文字"已领取",然后下面是百分比数字,该怎么解决呢.或者调整数字的位置怎么调整,比如往下移动一些,,文档说明不详细,,有谁可以帮我吗? 作者可以留个联系方式吗 回复
    hying28 0
    2018/6/6 14:34:04
    当value值为0 的时候也会有两种颜色怎么办啊,value为0的时候应该只有一种颜色啊 回复
    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

    这个效果不错,学习了

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复