纯css轻松实现环形进度条

我们在工作中用到环形进度条的时候,一般都是使用组件库提供的,那么你有没有想过这是怎么实现的呢?

你可能很容易会想到使用canvasctx.arc()方法画一个圆弧来实现,并且以上展示的**「antd」 「element」**环形进度条,也是使用的svg实现的。

其实有更简单的办法,今天我们使用**「纯css」**实现一个环形进度条,那就是使用css函数conic-gradient()

CSS 函数 conic-gradient() 创建一个由**「渐变」**组成的图像,渐变的颜色围绕一个中心点旋转(而不是从中心辐射)进行过渡。 ------来自MDN

从demo我们可以看到右边所展示的图像是由左边代码中所声明的6种**「不同颜色」「不同角度」**逆时针旋转组成的,当我设置圆角后,看上去就像一个饼图。

「那么如果我只给两个颜色,会是什么样子呢?」

可以看到,其实这里也是可以直接使用百分比的。

看到这里你或许明白我要做什么了,对,再加一个小一点的元素覆盖上去,环形进度条不就有了吗!

这时候你可能会说,你这都写死的,那我用变量传进来不就行了:

好了,大功告成,是不是很简单!并且这个conic-gradient()浏览器兼容性也不错。

最后奉上全部代码:

html 复制代码
<div 
     class="progress" 
     style="--progress: 80%; --last: 20%;" 
     data-progress="80%"
>
</div>
css 复制代码
body {
 padding: 20px;
}
.progress {
 width: 200px;
 height: 200px;
 background: conic-gradient(
      green var(--progress), 
      #f1f1f1 var(--last)
    );
 border-radius: 50%;
 position: relative;
 &::before {
  content: attr(data-progress);
  position: absolute;
  inset: 10px;
  background-color: #fff;
  width: 180px;
  height: 180px;
  text-align: center;
  line-height: 180px;
  border-radius: 50%;
 }
}
相关推荐
Demoncode_y10 小时前
前端布局入门:flex、grid 及其他常用布局
前端·css·布局·flex·grid
CoderYanger16 小时前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
软件技术NINI16 小时前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI16 小时前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
金梦人生19 小时前
Css性能优化
前端·css
写代码的皮筏艇19 小时前
CSS属性继承与特殊值
前端·css
我有一棵树19 小时前
使用Flex布局实现多行多列,每个列宽度相同
前端·css·html·scss·flex
Light601 天前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
速易达网络1 天前
Vue3 原生移动应用开发来了
前端·javascript·css
用户458203153171 天前
CSS 层叠层 (@layer) 详解:控制样式优先级新方式
前端·css