学习 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>
相关推荐
云上艺旅19 小时前
K8S学习之基础七十四:部署在线书店bookinfo
学习·云原生·容器·kubernetes
你觉得20519 小时前
哈尔滨工业大学DeepSeek公开课:探索大模型原理、技术与应用从GPT到DeepSeek|附视频与讲义下载方法
大数据·人工智能·python·gpt·学习·机器学习·aigc
A旧城以西20 小时前
数据结构(JAVA)单向,双向链表
java·开发语言·数据结构·学习·链表·intellij-idea·idea
无所谓จุ๊บ20 小时前
VTK知识学习(50)- 交互与Widget(一)
学习·vtk
FAREWELL0007520 小时前
C#核心学习(七)面向对象--封装(6)C#中的拓展方法与运算符重载: 让代码更“聪明”的魔法
学习·c#·面向对象·运算符重载·oop·拓展方法
吴梓穆21 小时前
UE5学习笔记 FPS游戏制作38 继承标准UI
笔记·学习·ue5
Three~stone21 小时前
MySQL学习集--DDL
数据库·sql·学习
齐尹秦21 小时前
HTML 音频(Audio)学习笔记
学习
瞌睡不来1 天前
(学习总结32)Linux 基础 IO
linux·学习·io
Moonnnn.1 天前
运算放大器(四)滤波电路(滤波器)
笔记·学习·硬件工程