炫酷的圆形进度条

1 篇文章 0 订阅

还没有封装成插件,不过我会尽快的。GitHub

效果图如下,目前仅仅是展示样式。这里随带讲一下这个样式是如何实现的。


核心技术使用canvas 与 js实现。

从外到内依次讲解,光源来至左上方。

1.最外面的是一个灰色的圆环,外加一个有效方偏移的阴影

2.蓝色的方块 来源于 18 deg的扇形,加上间距才18deg

3.一个白色到灰色的线性渐变的圆环。起点:- √ ̄2*R/2 , √ ̄2*R/2 终点 - √ ̄2*R/2 , √ ̄2*R/2

4.一个灰色到白色的线性渐变圆环。起点:- √ ̄2*R/2 , √ ̄2*R/2 终点 - √ ̄2*R/2 , √ ̄2*R/2

5.一个白色到灰色的线性渐变圆环,起点:- √ ̄2*R/2 , √ ̄2*R/2 终点 - √ ̄2*R/2 , √ ̄2*R/2

6.一个灰色到白色的渐变圆。。起点:0 ,0 终点 - √ ̄2*R/2 , √ ̄2*R/2

7。中间的字体 水平 垂直居中。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值