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

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

 30556  348  查看评论 (12)
分享到微信朋友圈
X
jQuery环形进度条(原创,兼容ie5及以上) ie兼容6

更新时间:2021-02-03 23:26:57

更新说明:

option配置参数	类型	说明
type	string	进度条类型默认
loopvalue	number	进度条数值
background	string	进度条背景颜色默认#CCCCCC
color	string	进度条颜色默认#00A0E9
isText	boolean	进度条文字是否显示
textColor	string	进度条文字颜色type为loop默认#00A0E9,type为bar默认#FFFFFF
textPosition	object	textPosition: {x: number,// 进度条文字中心位置X,默认为居中 y: number// 进度条文字中心位置X,默认为居中},
fontSize	number	进度条文字字体默认20px
fontWeight	number	进度条文字加粗默认700
width	number	进度条宽度type为loop默认20px,type为bar默认300px
radius	number	进度条半径默认60,type为loop生效
deg	number	进度条角度默认12点刻度,type为loop生效
time	number	进度条动画时间毫秒默认1000
easing	string	进度条动画类型默认
linear,动画类型:'linear','<' 或者 'easeIn' 或者 'ease-in','>' 或者 'easeOut' 或者 'ease-out','<>' 或者'easeInOut'或者'ease-in-out','bounce'

更新时间:2021-02-01 22:32:34

更新说明:修改为面向对象模式,可以动态修改值,以及更多配置


更新时间: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'

相关插件-加载,圆边

HTML5实现的网页进度条

HTML5实现的网页进度条
  加载
 41441  381

progress 标签制作加载(原创)

利用HTNL5新标签制作进度条加载,代码非常简单且实用。
  加载
 13986  214

菊花加载

超好用的菊花加载效果,可用于手机端
  加载
 65986  406

jquery实现图片预加载

jquery实现图片预加载
  加载
 49927  446

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

    断弦 0
    2021/3/5 10:49:07
    怎样设置环形的大小? 回复
    lztong 0
    2021/3/3 8:49:49
    怎么获取到进度条颜色,比如0-50一种颜色,50%-99%的时候另一种颜色,100%再变为另一种颜色 回复
    jianrourou 0
    2020/8/7 18:06:42
    这个插件怎么把死的数据换成后台给的
        1
        2021/2/3 9:53:49
        var bar1 = new Progress($('.div1')[0],{value:你的后台值})
        bar1.update(你的后台值)
    回复
    ┽夜後咖啡┽ 0
    2019/5/23 9:13:53
    91% 以上的时候 动画圆环有bug
        1
        2021/2/3 9:54:13
        是由于动画原因去掉就行
    回复
    liz 0
    2018/7/10 10:22:32
    感谢分享,可是设置成95%时那个动画会有bug
        1
        2021/2/3 9:55:52

        动画原因用这几个没问题

        'linear',
        '<' 或者 'easeIn' 或者 'ease-in',
        '>' 或者 'easeOut' 或者 'ease-out',
        '<>' 或者'easeInOut'或者'ease-in-out',
        'bounce'
    回复
    cav 0
    2018/3/21 11:20:09
    文字能设置位置就更好了
        1
        2021/2/3 9:54:59

        现在可以了

        textPosition: {
            x: 150, // 进度条文字中心位置X,默认为居中
            y: 10 // 进度条文字中心位置X,默认为居中
        },
    回复
    fire 0
    2018/3/7 16:00:23
    这个loading效果 如何设置loading的起始点 我现在想从圆环的下方开始
        1
        2021/2/3 9:56:26
        deg 进度条角度默认12点刻度,type为loop生效
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复