AliveSeven Blog

前言：开发的时候遇到一个进度条实现的问题，和普通的进度条不一样，不是那种常规的进度条。形状有点不规范。如下

常规的进度条可以直接用组件库来实现，而像这种进度条，最好的方法就是让UI把进度条满格的整条切出来，并且把底图全部切出来，利用一个变量来控制要显示的进度的width。

实现方法

先看html相关的代码，css用到了tailwind的写法。
主要有三个盒子，最外层的div是底图，为第一层
然后是其第二层，控制进度主要通过控制第二层的width的百分比+overflow-x-hidden来实现
然后是第三层，也就是最底层，是固定width和height的进度条，也就是上图中的黄色那条

架构简图

实例代码

html 复制代码

        <!-- 这里是进度 -->
        <div class="w-619 h-29 mt-8 progress relative">
          <!-- 这里才是要变化的长度， -->
          <div
            class="max-w-605 h-full relative overflow-hidden w-605"
            style="width: 78%"
          >
            <!-- 这里才是进度条 -->
            <div
              class="w-605 h-13 pro absolute top-8 bottom-7 left-8 right-6"
            ></div>
          </div>
        </div>

注意：第二层必须为relative布局，最底层必须为absolute

然后是css部分

css 复制代码

.progress {
  background: url(../../assets/img/progress.png) 0 0 no-repeat;
  background-size: cover;
}
.pro {
  background: url(../../assets/img/pro.png) 0 0 no-repeat;
  background-size: cover;
}

实现效果

AliveSeven

一个有趣的博客

文章

标签

分类

AliveSevenの博客

Vue实现两张图片叠加的进度条效果

实现方法

架构简图

实例代码

实现效果