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

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

 4409  40  查看评论 (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简单进度条插件

jQuery简单实用的轻量级进度条插件
  加载
 32877  55

圆形进度按钮

执行按钮提交创建圆形进度加载提示
  加载
 7860  100

jquery实现图片预加载

jquery实现图片预加载
  加载
 16633  129

jQuery顶部加载动画插件loadBar.js

loadBar是一个轻量级的(最小2KB)jQuery插件,当加载内容时,页面顶部显示一个漂亮的动画条。
  加载
 5801  44

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

取消回复