自定义进度条

vue中自定义双重进度条

需求

项目需要增加一个进度条，用了element的组件，但并不符合需求。一个进度条中有两个不同的进度，所以只能手动完成

思路

在父盒子里面写两个子盒子，给每个盒子设置不同的背景色，利用定位实现三个盒子在同一个位置，最后设置子盒子的宽度就可以完成。通常后端会给我按照百分比或数字的格式返回我们(我这里是直接返回的数字)。
尝试多种方式控制宽度但都没有达到预期效果，最后通过定义函数完成

代码

html

<span class="progress" style="width