当前位置：首页 > article >正文

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

article 2024/10/5 6:04:53

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

    <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>

查看全文

http://www.kler.cn/news/332756.html