学习 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>
相关推荐
EterNity_TiMe_38 分钟前
【论文复现】(CLIP)文本也能和图像配对
python·学习·算法·性能优化·数据分析·clip
sanguine__42 分钟前
java学习-集合
学习
lxlyhwl42 分钟前
【STK学习】part2-星座-目标可见性与覆盖性分析
学习
nbsaas-boot43 分钟前
如何利用ChatGPT加速开发与学习:以BPMN编辑器为例
学习·chatgpt·编辑器
CV学术叫叫兽1 小时前
一站式学习:害虫识别与分类图像分割
学习·分类·数据挖掘
我们的五年2 小时前
【Linux课程学习】:进程程序替换,execl,execv,execlp,execvp,execve,execle,execvpe函数
linux·c++·学习
一棵开花的树,枝芽无限靠近你2 小时前
【PPTist】添加PPT模版
前端·学习·编辑器·html
VertexGeek2 小时前
Rust学习(八):异常处理和宏编程:
学习·算法·rust
二进制_博客3 小时前
Flink学习连载文章4-flink中的各种转换操作
大数据·学习·flink
codebolt3 小时前
ADS学习记录
学习