网页进度条研究

有些场景需要使用到进度条，在以前基本都是通过div组合实现的，实现起来不难但是有点繁琐。

在h5推出后里面有个progress标签就是解决进度条问题的，实现起来非常简单。

<progress value="85" max="100">

效果如下：

用法和样式都很简单，要更好的展示，比如中间或者末尾带数字或者改变颜色大小等样式还是得自己额外写代码实现。本来想自己写的，但是发现不少框架都有。懒得自己写了，直接列一下吧。

1.拼图（pintuer）框架

里面提供了两种方式。分别是对h5标签渲染和自己用div实现。 参考：拼图开发文档-元件-进度条

（1） 对原生的h5标签进行渲染

（2）通过div来实现

 

2.layui框架

layui是通过两个div来实现的。参考：进度条 - 页面元素 - Layui

 

3.vant框架

本质一样，通过div配合span实现的。参考：Vant - Mobile UI Components built on Vue

 

 

此外还有圆环进度条。目前搜集到了两个。

1.pintuer拼图圆环。是通过div实现的。参考：拼图开发文档-元件-圆环

 

 

 

 

 

 

 

 

 2.vant圆环进度条。是通过svg实现的。参考：Vant - Mobile UI Components built on Vue