学习 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>
相关推荐
qsmyhsgcs34 分钟前
Java程序员转人工智能入门学习路线图(2025版)
java·人工智能·学习·机器学习·算法工程师·人工智能入门·ai算法工程师
Humbunklung1 小时前
PySide6 GUI 学习笔记——常用类及控件使用方法(常用类矩阵QRectF)
笔记·python·学习·pyqt
每次的天空2 小时前
Android学习总结之Java篇(一)
android·java·学习
黑不拉几的小白兔3 小时前
risc-V学习日记(4):RV32I指令集
学习·risc-v
春眠不觉晓♞3 小时前
使用多线程快速向Excel中快速插入一万条数据案例
java·学习·excel
Mabnus4 小时前
文献分享:一种四价双特异性抗体的功能性和IgG样稳定性、药理学和可开发特性研究
学习
岁月不能老4 小时前
Linux-Part8-考试(学习Linux第8天)
linux·运维·学习
peter67685 小时前
kvm学习小结
学习
zcyf08096 小时前
kafka理论学习汇总
java·分布式·学习·kafka
*TQK*7 小时前
线性代数——行列式⭐
笔记·学习·线性代数