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

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

 2864  29  查看评论 (0)
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简单时尚的进度条插件ProBars

ProBars时尚的进度条插件,提供多种加载效果兼容性好,在低版本浏览器中会确少一些效果.
  加载
 14469  23

EasyLazyload.js 超好用js图片延迟加载

超简单图片延迟加载js插件
  加载
 10688  124

jquery 实现流程进度显示

基于jQuery实现的流程进度显示,可应用于网络订单状态查看,用户注册状态查看等
  加载
 17519  188

jQuery风车旋转进度条

jQuery风车旋转进度条代码基于jquery1.11.0.min.js制作,点击按钮增加进度。
  加载
 4510  38

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

取消回复