【微信小程序】纯CSS实现圆环型进度条

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

以下内容来自于去年的一次案例,随着微信小程序的不断改版,部分条件可能已不再适用,请谨慎参考。内容比较短,主要都在代码片段里。

案例

某个项目中需要用到如下图这样的一个圆环行的进度条。
0.png
一开始的想法是使用canvas来实现,但是canvas是原生组件,层级最高(当时的情况),实际使用时不方便使用。所以决定尝试用纯CSS来实现这一效果。

实现原理

先上代码:https://developers.weixin.qq....
这里主要用到的是CSS中的clip属性,将一个正方形裁剪后只显示右侧一半,但是仍然以正方形中心为圆心来旋转,来实现需要的角度。
0-2.png

clip: rect(0rpx, 46rpx, 92rpx, 0rpx);

这样最上面那个进度条就可以由以下三部分叠加,在最上面再叠加一个小一号的白色圆形,最外层加上圆角后就可以实现。(下图中红线示例了最外层的圆角以及最上层叠加的白色圆形位置)
0-3.png
叠加效果
0-4.png
用到蓝色圆环小于180度的情况下,需要把背景色和前景色对调。

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看