PS：实现进度条的方式有很多种，比如type=range的input、progress、metra等标签，还有antDesign与Element封装好的组件，甚至还有通过伪类实现的进度条，其他还有各种插件等，本文我只讨论上述的几种
1.div+伪类
该方法的优势在完全可以自定义，但是需要自己去动手写各种样式，因为所有的东西都是自己写的，所以不存在什么兼容性的问题。比较推荐（如果遇到个性特别强的样式的时候，就有的苦头吃了😆😆😆😆）
2.progress标签
progress标签是html本身就存在的标签，兼容性还可以，基本参数如下，可设置当前值与最大值
<progress class="btn" value="50" max="100"></progress>
3.metra标签
metra标签也是html本身就存在的标签，PC的兼容性还可以，但是移动端的兼容性一般，可设置high与low，超出取件进度条颜色变异，当然也可以设置最大最小值，当前值。
<meter class="btn" high="80" low="20" max="100" min="0" :value="num"></meter>
4.input-range
input标签是个很神奇的东西，他的type有很多种，当然我们平时用的最多的是text、password了，其他的还有radio，checkbox，button，file，image，color等等，还有本文要说的range，input兼容性还是非常好的，range的好处在于他是可以拖拽的，拖拽进度条的数值，这个在vue或者react中绑定v-model变量还是很好用的，标签很简单，如下。
<input class="btn" type="range" value="20" />
注意
input、progress与metra因为是html自带的，而国内的浏览器也是群魔乱舞，一些浏览器可能对这些标签的样子并不是统一的！！！点我查看在线预览
