section: control
id: progressbar
description: 使用进度条
icon: %
filter: jindutiao jdt
---
# 进度条
提供工作或动作的实时反馈,只用简单且灵活的进度条。
进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持animation属性。
## 基本类型
进度条 |
描述 |
**40%** |
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
默认的进度条。为`.progress-bar`应用CSS的width值(%)来更改进度值。 |
## 颜色主题
为了一致的样式,进度条颜色使用与按钮相同的类。
进度条。 |
描述 |
**40%** |
主要/默认 |
**40%** |
`.progress-bar-info` |
**40%** |
`.progress-bar-success` |
**40%** |
`.progress-bar-warning` |
**40%** |
`.progress-bar-danger` |
## 特殊效果
用一个渐变可以创建条纹效果,在IE8中不可用。
进度条 |
描述 |
**40%** |
条纹效果:`.progress-striped` |
**40%** |
动画效果。给`.progress-striped`加上`.active`使它由右向左运动。在IE的所有版本不可用。 |
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
|
堆叠效果。把多个进度条放入同一个`.progress`,使它们堆叠。 |
```
```
```
```
```
35% Complete (success)
20% Complete (warning)
10% Complete (danger)
```
提示
本页面内的鼠标悬停在进度条上导致进度随机变化的动态效果仅仅作为演示,实际使用时你需要自己来设定或在适当实际更改要显示的进度。