实现圆形进度条（CSS3+jQuery-Vue）

时间：2023-04-02 20:51:16 HTML

的总体思路是：通过裁剪生成两个半圆显示静态进度条，再通过改变旋转角度生成动态效果。先回顾一下两个基础知识点（1）css一个不常用的属性：clip:rect(top,right,bottom,left);该属性指定裁剪后的矩形，其中top和bottom指定的偏移量是从元素框的上边缘开始计算的，right和left指定的偏移量是从元素框的左边缘开始计算的（这里是重要的是要注意底部和右侧的计算方法）。看下面这张超清图（直接导入了w3cplus的图片，带水印是不是违法？）：需要注意的是clip属性只能设置在“position:absolute”或者“position:fixed”的元素上"属性有效。Clip不适用于设置“position:relative”和“position:static”。关于clip，如果想了解更多，请阅读这篇文章：http://www.w3cplus.com/css3/c...(2)CSS的另一个属性：transform:rotate(deg);角度。热身练习：让我们画一个右半圆//html

//css.pie-right{position:absolute;顶部：0；左：0；高度：200px；宽度：200px；边界半径：50%；background:red;//注意这是代表当前进度的颜色}.right{position:absolute;顶部：0；左：0；高度：200px；宽度：200px；边界半径：50%；background:blue;//注意这不是当前Progress的颜色}.pie-right,.right{clip:rect(0,auto,auto,100px);}.mask{//我是maskposition:absolute;顶部：25px；左：25px；高度：150px；宽度：150px；背景：#fff；边界半径：50%；text-align:center;}效果如下：此时元素pie-right被元素right完全覆盖。然后，我们旋转一下：.right{transform:rotate(30deg);}旋转后的效果如下：现在我们可以看到旋转30度后，露出来的红色部分就是我们想要的进度，这就是大饼图元素的颜色。蓝色部分右侧元素的颜色是我们尚未达到的进度。圆形进度条的官方实现是指我们需要左右两个半圆，所以需要更改html结构：//html