学习 CSS 新的属性 conic-gradient 实现环形进度条

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

html 复制代码
    <div
      class="progress"
      style="--progress: 80%; --last: 20%"
      data-progress="80%"
    ></div>

<style scoped lang="scss">
.progress {
  display: inline-block;
  margin: 50px 20px;
  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%;
  }
}
</style>
相关推荐
数据与后端架构提升之路41 分钟前
从神经元到神经网络:深度学习的进化之旅
人工智能·神经网络·学习
一行11 小时前
电脑蓝屏debug学习
学习·电脑
星LZX1 小时前
WireShark入门学习笔记
笔记·学习·wireshark
阑梦清川1 小时前
在鱼皮的模拟面试里面学习有感
学习·面试·职场和发展
qq_433099401 小时前
Isaac Gym学习笔记——概述
学习
秃头佛爷3 小时前
Python学习大纲总结及注意事项
开发语言·python·学习
dayouziei5 小时前
java的类加载机制的学习
java·学习
dsywws8 小时前
Linux学习笔记之vim入门
linux·笔记·学习
晨曦_子画9 小时前
3种最难学习和最容易学习的 3 种编程语言
学习
城南vision9 小时前
Docker学习—Docker核心概念总结
java·学习·docker