css伪元素、flex实现可变数据的渐变色带末端圆圈进度条

kkkkkkkkira

已于 2022-06-28 16:29:19 修改

阅读量211

点赞数

分类专栏：需求文章标签： css css3 html

于 2022-06-28 16:24:56 首次发布

本文链接：https://blog.csdn.net/weixin_44099060/article/details/125504666

版权

需求专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.需求，图如下，数据可变

2.思路

进度条分两层：底层为深色的100%层，上层带颜色的是数量层，末端的圆圈用：after携带。上层的宽度通过style来修改。
直接在数量层写伪类放不上去，新建了一个div用来装末端的圆点。
更改itemNum的数就可以改变进度了

3.代码

<div class="item">
    <span>意见建议数</span>
    <div class="g-container">
      <div class="g-progress" :style="{ width: `${itemNum[0]}%`}"/>
      <div class="point" />
    </div>
    <span>{{ itemNum[0]}}</span>
  </div>

.g-container {
  width: 550px;
  height: 12px;
  border-radius: 25px;
  background: #0e3475;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.g-progress {
  height: inherit;
  border-radius: 25px 0 0 25px;
  background: linear-gradient(to right, #2366d1, #43ede7); 
}
.point::after {
  content: ' ';
  margin-left: -18px;
  width: 26px;
  height: 26px;
  display: block;
  background: radial-gradient(#fff 40%, #43ede7 10%, #43ede7 10px);
  border-radius: 50%;
}