摘要：简介实际开发中，文件的图片的加载等情形下经常需要展示进度情况。最简单的直接显示百分之多少即可，然后一般情况下就是条形进度条，设置长度表示已完成进度。这里介绍一下稍微复杂的圆形进度条如何实现。
实际开发中，文件的download、upload、图片的加载等情形下经常需要展示进度情况。 最简单的直接显示百分之多少即可，然后一般情况下就是条形进度条，设置长度表示已完成进度。这里介绍一下稍微复杂的圆形进度条如何实现。
transform 旋转 (这里只需要用到2d )
clip 裁剪 设置元素的一部分可视
整体的圆是分成两个半圆来实现的，为什么呢？因为要。。。每个圆遮住一半，不然完整的圆滚来滚去跟没滚一样。
下面只说明半圆的实现方式，最后拼在一起即可，以右半边为例一步步说明：
设圆整体区域 200px * 200px
遮住左边的100*200
{
clip: rect(0,200px,auto,100px) //不明白的先看相关资料
}
然后旋转一定的角度
{
transform: rotate(40px) //不明白语法的先找下资料
}
看上图发现，我们只要求半圆的实现，但上图已经超出右边半圆到左边区域了，到时候会覆盖左边，所以我们要把超出去的部分遮住，于是给右边半圆设置父容器，它的大小形状跟上面的半圆一样，只是它不旋转，这样就能遮住超出去的旋转半圆了。（这里我们给父容器加上底色）加上父容器后，效果如下。至此完成右边半圆的设置，在加上左边半圆，就搞定了。
具体使用时，当进度<= 50%，只有右边旋转，左边保持不动；>50%的时候，右边旋转180度，左边也旋转一定度数
旋转的进度条，除了用在圆上，矩形上也可以。一样的道理，只是把旋转的区域增大，然后用矩形来截取即可。
圆形进度条
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111595.html
摘要：需求概要小程序中使用圆形倒计时，效果图思路使用个一个是背景圆环，一个是彩色圆环。 需求概要 小程序中使用圆形倒计时，效果图：showImg(https://segmentfault.com/img/bV3Bko?w=265&h=267); 思路 使用2个canvas 一个是背景圆环，一个是彩色圆环。 使用setInterval 让彩色圆环逐步绘制。 解决方案 第一步先写结构 一个盒...
摘要：引子移动端做一个加载的图标，跟以往沿用的都不太一样，是一个圆环进度条，圆环进度条也就罢了，还得能用百分比控制。 引子 移动端做一个 loadiing 加载的图标，跟以往沿用的都不太一样，是一个圆环进度条，圆环进度条也就罢了，还得能用百分比控制。 CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给出的css代码代入，然后根据自己的需求改，发现圆环可以完美转动了，但是好像没...
摘要：引子移动端做一个加载的图标，跟以往沿用的都不太一样，是一个圆环进度条，圆环进度条也就罢了，还得能用百分比控制。 引子 移动端做一个 loadiing 加载的图标，跟以往沿用的都不太一样，是一个圆环进度条，圆环进度条也就罢了，还得能用百分比控制。 CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给出的css代码代入，然后根据自己的需求改，发现圆环可以完美转动了，但是好像没...
阅读 2459·2021-11-22 15:25
阅读 1207·2021-11-15 17:59
阅读 954·2021-09-29 09:34
阅读 1348·2021-09-26 09:46
阅读 2871·2021-09-02 15:40
阅读 981·2019-08-30 15:56
阅读 3075·2019-08-30 15:55
阅读 571·2019-08-29 17:08
