最简单的进度条需要几行代码？
在bootstrap中，只需要两句。
不考虑代码规范的话，，，
实现效果如图所示：
文章图片
下面讲解进度条的语法和样式
- 默认进度条，就像上图，没有任何修饰的进度条。进度条宽度是父元素的宽度。
先创建一个外层div，添加class属性progress，progress作用就是申明进度条的基本样式。
然后创建一个内部div，添加class属性progress-bar，这个属性作用是关联上边的progress基本进度条样式。
并添加属性width=60%，用于声明当前进度条位置是在60%。
- 常用的进度条颜色。默认的进度条颜色是蓝色，在bootstrap中，还有success、info、warning、danger表达不同意义的颜色样式。使用方法是在内部div的class属性中添加 progress-bar-success/info/warning/danger，注意，是添加，前边的progress-bar仍然需要保留。
文章图片
3. 添加条纹。在外层div的class属性添加progress-striped，可以添加条纹。添加active，可以添加最基础的动画效果。
【Bootstrap中进度条样式详解】
文章图片
进度条样式修改
对于进度条外框修改，可以在外层div中添加css样式来改变，对于进度条内部的修改，则是通过对内部div添加css样式来修改。
还可以通过多个内层div放入一个外层div的方式，形成进度条堆叠效果。（类似手机内存空间的条形示意图，不同颜色代表不同类型文件）
文章图片
本人的坚果Pro2手机的手机内存空间进度条：
文章图片
制作类似进度条：
效果图：（渐变效果可以以后加入）
文章图片
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- vue|Vue面试常用详细总结
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例