circleProgress.js圆环进度条插件

复制代码
<script src="jquery.min.js"></script>
<script src="jquery-circle-progress/dist/circle-progress.js"></script>

<div id="circle"></div>

<script>
    $('#circle').circleProgress({
        value: 0.75,
        size: 80,
        fill: {
            gradient: ["red", "orange"]
        }
    });
</script>

选项:

Option Description
value 必须值,圆环的百分比从0到1. 默认值: 0
size 圆环大小 Default: 100
startAngle 初始角度 Default: -Math.PI
reverse 是否逆时针 Default: false
thickness 圆环的宽度,默认为1/4的大小 Default: "auto"
lineCap Arc line cap: "butt", "round" or "square" - read more Default: "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" } Default: { gradient: ["#3aeabb", "#fdd250"] }
emptyFill 空白的圆环 Default: "rgba(0, 0, 0, .1)"
animation 动画设置 See jQuery animations. You may also set it to false Default: { duration: 1200, easing: "circleProgressEase" } "circleProgressEase" is just a ease-in-out-cubic easing
animationStartValue 动画默认开始从那个值开始运动。 Default: 0.0

事件

Event Handler
circle-animation-start function(event): - event - jQuery event
circle-animation-progress function(event, animationProgress, stepValue): - event - jQuery event - animationProgress - from 0.0 to 1.0 - stepValue - current step value: from 0.0 to value
circle-animation-end function(event): - event - jQuery event

其他:

You can get the <canvas> (but only if the widget is already inited):

复制代码
$('#circle').circleProgress({ value: 0.5 });
var canvas = $('#circle').circleProgress('widget');

You can get the CircleProgress instance:

复制代码
var instance = $('#circle').data('circle-progress');

You can redraw existing circle (but only if the widget is already inited):

复制代码
$('#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
相关推荐
hqwest4 分钟前
QT肝8天09--用户列表
开发语言·c++·qt·上位机·qt开发
山,离天三尺三1 小时前
基于LINUX平台使用C语言实现MQTT协议连接华为云平台(IOT)(网络编程)
linux·c语言·开发语言·网络·物联网·算法·华为云
吾疾唯君医1 小时前
记录GoLang创建文件并写入文件的中文乱码错误!
开发语言·后端·golang
小年糕是糕手2 小时前
【数据结构】算法复杂度
c语言·开发语言·数据结构·学习·算法·leetcode·排序算法
JAVA学习通2 小时前
微服务项目->在线oj系统(Java-Spring)--C端用户(超详细)
java·开发语言·spring
数据知道2 小时前
Go基础:Go语言ORM框架GORM详解
开发语言·jvm·后端·golang·go语言
计算机毕业设计小帅2 小时前
【2026计算机毕业设计】基于jsp的毕业论文管理系统
java·开发语言·毕业设计·课程设计
明天会有多晴朗2 小时前
深度剖析 C++ 之内存管理篇
c语言·开发语言·c++
potato_may2 小时前
C语言第3讲:分支和循环(上)—— 程序的“决策”与“重复”之旅
c语言·开发语言
铅笔侠_小龙虾2 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js