评论

纯CSS实现圆环型进度条

不使用canvas,纯CSS实现圆环型进度条

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

案例

某个项目中需要用到如下图这样的一个圆环行的进度条。

一开始的想法是使用canvas来实现,但是canvas是原生组件,层级最高(当时的情况),实际使用时不方便使用。所以决定尝试用纯CSS来实现这一效果。

实现原理

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

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

这样最上面那个进度条就可以由以下三部分叠加,在最上面再叠加一个小一号的白色圆形,最外层加上圆角后就可以实现。(下图中红线示例了最外层的圆角以及最上层叠加的白色圆形位置)

叠加效果

用到蓝色圆环小于180度的情况下,需要把背景色和前景色对调。

最后一次编辑于  2019-12-26  
点赞 11
收藏
评论

4 个评论

  • 沉冰
    沉冰
    2019-12-27

    我之前也准备这样弄后来感觉太麻烦,而且有些机子有点问题;

    然后我就是先弄一个圆环,也是分左右2边,

    弄2个有色区,先一边的高度从上往下增加高度,增完之后另一半再从下往上增高度,

    就是样式有点怪

    https://developers.weixin.qq.com/s/eXckRVmI7tdN


    2019-12-27
    赞同
    回复
  • 洗格
    洗格
    2019-12-26
    手机多了将会有兼容,中间会有一像素间隙,这个实验8月份我已经测试过了,5位前端都看过,css尺寸定位完全吻合,也会有间隙
    2019-12-26
    赞同
    回复 4
    • 祺爸💎
      祺爸💎
      2019-12-26
      间隙具体在什么位置?
      2019-12-26
      回复
    • 洗格
      洗格
      2019-12-27回复祺爸💎
      有些手机左右两个模块的中间会有一像素空隙,虽然canvas组件层级高也可以使用cover-view来编写代码,便可以改变层级
      2019-12-27
      回复
    • 祺爸💎
      祺爸💎
      2019-12-27回复洗格
      我这种两个重叠的也有空隙吗?
      2019-12-27
      回复
    • 祺爸💎
      祺爸💎
      2019-12-27回复洗格
      当时不用canvas除了层级问题外,还有canvas不支持fixed定位
      2019-12-27
      回复
  • one for all
    one for all
    2019-12-26

    笔记写的不错

    2019-12-26
    赞同
    回复
  • 拾忆
    拾忆
    2019-12-26

    先点后看

    2019-12-26
    赞同
    回复
登录 后发表内容