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

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

 5800  46  查看评论 (2)
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'

相关插件-加载,圆边

HTML5实现的网页进度条

HTML5实现的网页进度条
  加载
 16508  81

3D立体环形进度图表

3D立体环形进度图表,只要传入0100的整数,就能显示对应的百分比,大小自适应。
  加载
 8721  42

圆形进度按钮

执行按钮提交创建圆形进度加载提示
  加载
 9173  108

8种fakeloader页面加载效果代码

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

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

    cav 0
    2018/3/21 11:20:09
    文字能设置位置就更好了 回复
    fire 0
    2018/3/7 16:00:23
    这个loading效果 如何设置loading的起始点 我现在想从圆环的下方开始 回复
取消回复