进度

使用 Bootstrap 自定义进度条的文档和示例，支持堆叠条、动画背景和文本标签。

本页内容

v5.3.0 中的新标记 — 我们已弃用进度条的先前 HTML 结构，并用一个更易于访问的结构替换了它。以前的结构将继续在 v6 之前有效。在我们的迁移指南中查看更改内容。

工作原理

进度组件由两个 HTML 元素、一些用于设置宽度的 CSS 和一些属性构建。我们不使用 HTML5 <progress> 元素，确保你可以堆叠进度条、对其进行动画处理并在其上放置文本标签。

我们使用 .progress 作为包装器来指示进度条的最大值。
.progress 包装器还需要 role="progressbar" 和 aria 属性才能使其可访问，包括可访问名称（使用 aria-label、aria-labelledby 或类似名称）。
我们使用内部 .progress-bar 纯粹用于视觉条形图和标签。
.progress-bar 需要内联样式、实用程序类或自定义 CSS 来设置其宽度。
我们提供了一个特殊的 .progress-stacked 类来创建多个/堆叠的进度条。

将所有这些放在一起，你就会得到以下示例。

html

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

进度条尺寸

宽度

Bootstrap 提供了一些用于设置宽度的实用程序。根据您的需求，这些实用程序可能有助于快速配置 .progress-bar 的宽度。

html

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

高度

您只需在 .progress 容器上设置 height 值，因此如果您更改该值，内部 .progress-bar 将自动相应调整大小。

html

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

请注意，默认情况下，.progress-bar 中的内容由 overflow: hidden 控制，因此它不会溢出进度条。如果您的进度条比其标签短，则内容将被截断，并且可能变得不可读。要更改此行为，您可以从溢出实用程序中使用 .overflow-visible，但请务必同时定义一个明确的文本颜色，以便文本保持可读性。但请注意，目前此方法不考虑颜色模式。

进度条的长标签文本，设置为深色

html

<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div>
</div>

背景

使用背景实用程序类来更改各个进度条的外观。

html

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

辅助功能提示：仅使用颜色来添加含义只会提供视觉指示，而不会传达给屏幕阅读器等辅助技术的用户。请确保含义从内容本身（例如，具有足够色彩对比度的可见文本）中显而易见，或通过其他方式（例如，使用 .visually-hidden 类隐藏的附加文本）包含在内。

如果您要为具有自定义背景色的进度条添加标签，请务必同时设置适当的文本颜色，以便标签保持可读性并具有足够的对比度。

25%

50%

75%

100%

html

<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success" style="width: 25%">25%</div>
</div>
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-info text-dark" style="width: 50%">50%</div>
</div>
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
</div>
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-danger" style="width: 100%">100%</div>
</div>

或者，您可以使用新的组合颜色和背景辅助类。

75%

html

<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-warning" style="width: 75%">75%</div>
</div>

多个进度条

您可以在包含 .progress-stacked 的容器内包含多个进度组件，以创建单个堆叠进度条。请注意，在这种情况下，用于设置进度条的可视宽度的样式必须应用于 .progress 元素，而不是 .progress-bar。

html

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

条纹

将 .progress-bar-striped 添加到任何 .progress-bar 以通过 CSS 渐变在进度条的背景颜色上应用条纹。

html

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

动画条纹

条纹渐变也可以是动画。将 .progress-bar-animated 添加到 .progress-bar 以通过 CSS3 动画将条纹从右向左动画化。

html

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

CSS

变量

在 v5.2.0 中添加

作为 Bootstrap 不断发展的 CSS 变量方法的一部分，进度条现在在 .progress 上使用本地 CSS 变量，以增强实时自定义。CSS 变量的值通过 Sass 设置，因此 Sass 自定义仍然受支持。

scss/_progress.scss

--#{$prefix}progress-height: #{$progress-height};
@include rfs($progress-font-size, --#{$prefix}progress-font-size);
--#{$prefix}progress-bg: #{$progress-bg};
--#{$prefix}progress-border-radius: #{$progress-border-radius};
--#{$prefix}progress-box-shadow: #{$progress-box-shadow};
--#{$prefix}progress-bar-color: #{$progress-bar-color};
--#{$prefix}progress-bar-bg: #{$progress-bar-bg};
--#{$prefix}progress-bar-transition: #{$progress-bar-transition};

Sass 变量

scss/_variables.scss

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       var(--#{$prefix}secondary-bg);
$progress-border-radius:            var(--#{$prefix}border-radius);
$progress-box-shadow:               var(--#{$prefix}box-shadow-inset);
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

关键帧

用于为 .progress-bar-animated 创建 CSS 动画。包含在 scss/_progress-bar.scss 中。

scss/_progress.scss

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