1、工作原理

进度条（progress）组件由两个 HTML 元素、一些用于设置宽度的 CSS 样式和一些其它属性组成。我们并未使用 HTML5 的 <progress> 元素，以确保可以堆叠进度条（progress bar）并添加动画效果，以及在其上面放置文本标签。

我们使用 .progress 作为最外层元素，用于指示进度条（progress bar）的最大值。
我们在内部使用 .progress-bar 来指示到目前为止的进度。
.progress-bar 需要通过内联样式、工具类或自定义 CSS 属性来设置其宽度。
.progress-bar 还需要一些 role 和 aria 属性来实现其可访问性。

将上面这些组合到一起，就是以下这些示例：

<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress"><div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress"><div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress"><div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress"><div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Bootstrap 提供了几个用于设置宽度的工具类。根据你自己的需求，这些工具类可能有助于你快速设置进度。

<div class="progress"><div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

2、标签

通过在 .progress-bar 元素内添加文本，就可以为进度条（progress bar）添加标签。

<div class="progress"><div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

3、高度

我们只为 .progress 设置了一个 height 值，因此，如果你改变了该值，内部的 .progress-bar 将自动地调整尺寸。

<div class="progress" style="height: 1px;"><div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;"><div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

4、背景色

通过使用背景色相关的工具类可以改变单个进度条（progress bar）的外观。

<div class="progress"><div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress"><div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress"><div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress"><div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

5、多个进度条

如果需要，可以在一个进度条（progress）组件内可以添加多个进度条（progress bar）。

<div class="progress"><div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div><div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div><div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

6、条纹进度条

为任何 .progress-bar 添加 .progress-bar-striped 即可添加条纹样式，这是通过 CSS 的渐变功能在进度条（progress bar）的背景色上应用条纹效果实现的。

<div class="progress"><div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress"><div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress"><div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress"><div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress"><div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

7、动画条纹

条纹渐变也可以有动画效果。为 .progress-bar 添加 .progress-bar-animated 即可利用 CSS3 动画功能添加条纹从右到左滚动的动画效果。

<div class="progress"><div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

Bootstrap系列之进度条（Progress）相关推荐

pdf html5 阅读进度,HTML5的进度条progress元素
原标题:HTML5的进度条progress元素 progress元素属于HTML5新元素,指进度条.IE10+以及其他靠谱浏览器都支持. 体验一下效果: 在html里写入查看浏览器效果:不同浏览器下 ...
Vue + Element 实现进度条 Progress
Vue + Element 进度条 Progress 前言:由于在公司可视化数字大屏项目中用到了,所以在博客里记录一下!如果能帮到你,那么点个赞吧,哈哈哈话不多说,先直接上效果图,有需要的大家可借鉴 ...
Bootstrap组件_进度条
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
Day-8 bootstrap 徽章、进度条、分页、列表组
徽章.进度条.分页.列表组徽章 1. 徽章(.Badges) 2. 各种颜色类型的徽章 3. 药丸形状徽章(.badge-pill) 4. 徽章插入到元素内进度条 1. 进度条(.progress ...
android 斑马进度条,bootstrap彩色斑马进度条
插件描述:基于Bootstrap制作的超酷彩色斑马线条纹进度条设计效果. 简要教程这是一款基于Bootstrap制作的超酷彩色斑马线条纹进度条设计效果.该进度条动画特效通过简单的CSS3 anima ...
linux dd 进度条,Progress 进度条 – DDProgressHUD
DDProgressHUD Progress 进度条,UIActivityIndicatorView 小菊花,弹窗,状态显示,高度自定义 DDProgressHUD的介绍提供了四种类型的展示: 显示 ...
C# Windows 7任务栏开发之进度条(Progress Bar)
Windows 7 任务栏为我们增添了许多其他功能:Jump Lists,Window Preview,Progress Bar,Overlay Icon 等等. 新任务栏的功能使我们的操作更加方便快 ...
flutter 自定义进度条progress
系统自带进度条有一定局限性,只能设置背景色,前景色要设置动画的颜色值,且不能自定义是否圆角等属性 // 2表示当前的值,10表示最大值 LinearProgressIndicator(value: ...
python 进度条_Python小程序系列——动态进度条(1)
Python动态进度条I 开始我们的第一个Python程序. 显示一个动态进度条,在同一个位置显示从1%到100% 源代码附上来: import sys #有关Python运行环境的变量和函数impo ...
NProgress系列之进度条
文章の目录一.概述二.安装三.简单使用写在最后地址一.概述官宣:纳米级进度条,使用逼真的涓流动画来告诉用户正在发生的事情! 二.安装添加js和css <script src='n ...

Bootstrap系列之进度条（Progress）

文章の目录