如何实现间隔式渐变色进度条

最新推荐文章于 2024-08-02 12:09:11 发布

不吃香菜吃葱

最新推荐文章于 2024-08-02 12:09:11 发布

阅读量498

点赞数 2

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_44019706/article/details/127630676

版权

示例图

在这里插入图片描述

实现：

<!-- 总数量 totalNum 现有数量 nowNum -->
<div class="box">
  <div class="grid-content">
    <div v-for="(item, index) in 40" :class="{'grid-reset': item % 2 !== 0 && item > nowNum/totalNum*40, 'grid-two': item % 2 === 0, 'grid-item': true}" :key="index"></div>
  </div>
</div>

totalNum: 500,
nowNum: 100,

/* 大盒子背景色 */
.box {
  background-color: #00103f;
  width: 300px;
  height: 300px;
  padding: 50px;
	/* 装所有item的盒子 设为渐变色 */
  .grid-content {
    display: flex;
    width: 200px;
    background-image: linear-gradient(to right, #0A89FA, #0aedff);
		/* 双数的item需要设置为与大盒子背景色一样，相当于没有双数item */
    .grid-two {
      background-color: #00103f;
    }
		/* 默认颜色为渐变色的背景色，永远不变，当比例数值没有到达40时，需要显示这个背景色 */
    .grid-reset {
      background-color: #0A285E;
    }
    .grid-item {
      width: 5px;
      height: 15px;
    }
  }
}