Progress进度条

~~Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.~~使用Bootstrap自定义进度条的文档和示例，支持堆叠的进度条、动画背景和文本标签。

~~On this page~~本页内容

How it works工作原理

~~Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.~~ 进度组件由两个HTML元素、一些用于设置宽度的CSS和一些属性构建。~~We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.~~我们不使用HTML5<progress>元素，确保可以堆叠进度条、设置进度条动画以及在进度条上放置文本标签。

~~We use the .progress as a wrapper to indicate the max value of the progress bar.~~我们使用.progress作为包装来指示进度条的最大值。
~~We use the inner .progress-bar to indicate the progress so far.~~我们使用内部.progress-bar来指示到目前为止的进度。
~~The .progress-bar requires an inline style, utility class, or custom CSS to set their width.~~.progress-bar需要内嵌样式、实用程序类或自定义CSS来设置其宽度。
~~The .progress-bar also requires some role and aria attributes to make it accessible.~~.progress-bar还需要一些role和aria属性才能访问。

~~Put that all together, and you have the following examples.~~把这些放在一起，你就有了下面的例子。

<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 provides a handful of utilities for setting width.~~ Bootstrap提供了一些设置宽度的实用程序。~~Depending on your needs, these may help with quickly configuring progress.~~根据您的需要，这些可能有助于快速配置进度。

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

Labels标签

~~Add labels to your progress bars by placing text within the .progress-bar.~~通过在.progress-bar中放置文本，将标签添加到进度栏中。

25%

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

Height高度

~~We only set a height value on the .progress, so if you change that value the inner .progress-bar will automatically resize accordingly.~~我们只在.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>

Backgrounds背景

~~Use background utility classes to change the appearance of individual progress bars.~~使用后台实用程序类更改单个进度条的外观。

<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>

Multiple bars多个进度条

~~Include multiple progress bars in a progress component if you need.~~如果需要，在进度组件中包含多个进度条。

<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>

Striped条纹的

~~Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.~~将.progress-bar-striped应用到任何.progress-bar，以利用CSS渐变在进度条的背景色上应用条纹。

<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>

Animated stripes动画条纹

~~The striped gradient can also be animated.~~ 条纹渐变也可以设置动画。~~Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.~~将.progress-bar-animated添加到.progress-bar，利用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>

Sass

Variables变量

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $box-shadow-inset;
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

Keyframes关键帧

~~Used for creating the CSS animations for .progress-bar-animated.~~ 用于创建针对.progress-bar-animated的CSS动画。~~Included in scss/_progress-bar.scss.~~包含在scss/_progress-bar.scss中。

@if $enable-transitions {
@keyframes progress-bar-stripes {
0% { background-position-x: $progress-height; }
}
}