html进度条圆圈渐变色,HTML5 canvas带渐变色的圆形进度条动画
jquery-circle-progress是一款带渐变色的圆形进度条动画特效jQuery插件。该圆形进度条使用的是HTML5 canvas来绘制圆形进度条及其动画效果,进度条使用渐变色来填充,效果非常的酷。
使用方法
$('#circle').circleProgress({
value: 0.75,
size: 80,
fill: {
gradient: ["red", "orange"]
}
});
配置参数
下面是该圆形进度条插件的一些可用参数:
参数
描述
value
这是唯一一个必填参数。值从0.0到1.0,默认值为0
size
canvas的大小,单位像素,默认值100
startAngle
初始角度,默认值为-Math.PI
reverse
是否反向绘制圆弧和动画,默认值为false
thickness
进度条圆弧的宽度。默认它自动为size的1/14大小,你可以设置你需要的值。默认值为auto
lineCap
圆弧的线头样式:"butt"、"round"和"square"。详细信息看这里。默认值为"butt"
fill
圆弧填充的配置。
-{ color: "#ff1e41" }
-{ color: 'rgba(255, 255, 255, .3)' }
-{ gradient: ["red", "green", "blue"] }
-{ gradient: [["red", .2], ["green", .3], ["blue", .8]] }
-{ gradient: [ ... ], gradientAngle: Math.PI / 4 }
-{ gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }
-{ image: "http://i.imgur.com/pT0i89v.png" }
-{ image: imageInstance }
-{ color: "lime", image: "http://i.imgur.com/pT0i89v.png" }
默认值为{ gradient: ["#3aeabb", "#fdd250"] }
emptyFill
空圆弧的颜色。默认值为"rgba(0, 0, 0, .1)"
animation
动画配置。可以参考jQuery animations。你可以设置为false来禁止动画。默认值:{ duration: 1200, easing: "circleProgressEase" }。"circleProgressEase"是一个ease-in-out-cubic easing动画效果
animationStartValue
默认进度条动画会在0.0开始,结束与value处。调用该参数可以直接动画。如果需要制作反向动画就将animationStartValue的值设置为1.0。你可以指定0.0到1.0之间的任何数值。默认值为0.0
事件
在允许进度条动画的情况下,有三个事件可用。
事件
处理程序
circle-animation-start:
function(event)
-event - jQuery事件
circle-animation-progress
function(event, animationProgress, stepValue):
-event - jQuery事件
animationProgress - 从0.0到1.0
stepValue - 当前的步长值,从0.0到value
circle-animation-end
function(event):
-event - jQuery事件
浏览器兼容
该圆形进度条插件使用,所有的现代浏览器都支持该元素,包括IE9+。可以查看Can I Use。
在不支持的浏览器中,插件提供了一些回退代码,如IE8浏览器。
其它
如果进度条组件已经被初始化,你可以获取:
$('#circle').circleProgress({ value: 0.5 });
var canvas = $('#circle').circleProgress('widget');
你可以获取CircleProgress对象实例:
var instance = $('#circle').data('circle-progress');
如果进度条组件已经被初始化,你可以重新绘制已经存在的圆环:
$('#circle').circleProgress({ value: 0.5, fill: { color: 'orange' }});
$('#circle').circleProgress('redraw'); // use current configuration and redraw
$('#circle').circleProgress(); // alias for 'redraw'
$('#circle').circleProgress({ size: 150 }); // set new size and redraw
你可以改变默认的参数配置:
$.circleProgress.defaults.size = 50;
html进度条圆圈渐变色,HTML5 canvas带渐变色的圆形进度条动画相关推荐
- html css 圆圈数字,html5 css3带日期的圆形数字电子时钟代码
特效描述:html5 css3 带日期 圆形数字 电子时钟代码.HTML5+CSS3圆形数字电子时钟. 代码结构 1. 引入JS 2. HTML代码 6 5 4 3 2 1 12 11 10 9 8 ...
- html canvas直线进度条,js+HTML5 canvas 实现简单的加载条(进度条)功能示例
本文实例讲述了js+HTML5 canvas 实现简单的加载条(进度条)功能.分享给大家供大家参考,具体如下: www.jb51.net canvas实现加载条动画 /* * 获取canvas, ca ...
- html5 canvas烂漫的空中散落的花瓣动画特效
html5 canvas烂漫的空中散落的花瓣动画特效 作品介绍 1.网页作品简介方面 :html5 canvas烂漫的空中散落的花瓣动画特效 2.网页作品编辑方面:作品下载后可使用任意HTML编辑软件 ...
- HTML5 Canvas可拖动的弹性大树摇摆动画
<!DOCTYPE html> <html lang="en"> <head> <title>HTML5 Canvas可拖动的弹性大 ...
- html ie动画效果,HTML5 canvas实现的IE9图标旋转效果(大风车动画)
HTML5 canvas实现的IE9图标旋转效果(大风车动画)_网页代码站(www.webdm.cn) *{padding:0;margin:0;} html,body{height:100%;ove ...
- 用html5做一条线,使用HTML5 canvas绘制线条的方法
使用HTML5 canvas绘制线条的方法 发布时间:2020-08-29 11:24:23 来源:亿速云 阅读:96 作者:小新 这篇文章主要介绍了使用HTML5 canvas绘制线条的方法,具有一 ...
- 【绘制】HTML5 Canvas 中渐变色和图案(图文、示例)
我的处女作<Canvas系列教程>在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作. 教程介绍.教程目录等能在README里查阅. 传送门:https: ...
- html5 canvas 圆圈,使用HTML5 Canvas arc()绘制圆形/圆环
前段时间的一个项目做到这个玩意,研究了一下绘制圆环的方法.最终使用HTML5的画布标签来做.arc()是HTML5 Canvas的一个API函数,作用是"创建弧/曲线(用于创建圆形或部分圆) ...
- html li 右跟下有倒影,HTML5 canvas实现的下雨夜湖面星空倒影动画特效
HTML5 CANVAS 下雨夜的湖面星空倒影 * { margin: 0; padding: 0; border: 0; background: #000 } canvas { position: ...
最新文章
- 《Kotlin项目实战开发》第1章 Kotlin是什么
- 技术新进展!谷歌AI部门宣布发现新技术以加速AI神经网络训练
- Weka学习五(ROC简介)
- capdriverconnect 黑色_【中信期货黑色(动力煤)】港口库存低位,结构性矛盾突出——周报20201101...
- IT培训分享:选择哪个编程语言好?
- Hadoop hdfs配置
- DynamipsGUI2.8 交换模块试用(Etherchannel)
- SAP S/4HANA生产订单释放后自动同步到MES系统
- Python 域名转IP(可包含http、https)
- 缓冲区溢出——初学者必须注意的问题
- php向浏览器输出,使PHP即时输出结果到浏览器
- Hadoop启动jobhistoryserver
- 关于ie浏览器的问题
- 国外科研论文搜索网站汇总
- 5g理论速度_5g速度有多快(5g网络速度到底有多快)
- 英语语法基础03(长难句)
- 解决tp5 Could not open input file: think问题
- 软件工程——结对作业一(雷镓,司佳宇)
- C语言学习:除去剪切板内容的换行与回车
- Starvis星光全彩摄像机技术