jQuery环形进度条(原创,兼容ie5及以上)

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

 6467  47  查看评论 (3)
jQuery环形进度条(原创,兼容ie5及以上) ie兼容6

更新时间:2017/9/8 上午9:19:33

更新说明:修复环形进度条数字位置为水平垂直居中


1.需要引入raphael.js.

2.复制需要的函数到你的代码中调用该函数并填写参数即可,函数有两个,一个是创建环形进度条,一个是创建矩形进度条.

环形进度条

参数

类型

描述

el

obj

DOM对象

val

number

数值(会自动附加%)

bg

string

进度条背景颜色

Color

string

进度条颜色

textColor

string

数值文字颜色

fontSize

string

数值文字字体大小需要带单位(px之类的)

size

number

圆环的宽度

r

number

圆环内半径

time

number

动画时间(毫秒)

easing

string

动画类型:

'linear',

'<' 或者 'easeIn' 或者 'ease-in',

'>' 或者 'easeOut' 或者 'ease-out',

'<>' 或者'easeInOut'或者'ease-in-out',

'backIn'或者 'back-in',

'backOut' 或者 'back-out',

'elastic',

'bounce'


矩形进度条

参数

类型

描述

el

obj

DOM对象

val

number

数值(会自动附加%)

bg

string

进度条背景颜色

color

string

进度条颜色

textColor

string

数值文字颜色

fontSize

string

数值文字字体大小需要带单位(px之类的)

lenght

Number

进度条总长度

size

number

进度条高度

time

number

动画时间(毫秒)

easing

string

动画类型:

'linear',

'<' 或者 'easeIn' 或者 'ease-in',

'>' 或者 'easeOut' 或者 'ease-out',

'<>' 或者'easeInOut'或者'ease-in-out',

'backIn'或者 'back-in',

'backOut' 或者 'back-out',

'elastic',

'bounce'

相关插件-加载,圆边

jQuery nprogress.js页面加载进度条

jQuery nprogress.js页面加载进度条显示当前网页的加载进度
  加载
 30639  102

jquery实现图片预加载

jquery实现图片预加载
  加载
 19756  141

纯css3制作绿色loading加载动画特效

纯css3制作绿色loading加载动画特效里面包含14款不同效果的绿色清新loading加载特效。
  加载
 18641  167

JS简单进度条

再也不愁JS进度条了
  加载
 12304  53

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

    liz 0
    2018/7/10 10:22:32
    感谢分享,可是设置成95%时那个动画会有bug 回复
    cav 0
    2018/3/21 11:20:09
    文字能设置位置就更好了 回复
    fire 0
    2018/3/7 16:00:23
    这个loading效果 如何设置loading的起始点 我现在想从圆环的下方开始 回复
取消回复