进度条

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>

身高

你只设置了一个 height 在……上的价值 .progress 容器，所以如果你改变那个值，内部 .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 从溢出工具.

使用此方法时，进度条内部比进度条本身更长的标签可能无法完全访问，因为它依赖于文本颜色与.progress和.progress-bar背景颜色都具有正确的对比度。在实现此示例时请小心。

如果文本可以覆盖进度条，我们通常建议将标签显示在进度条外部，以获得更好的可访问性。

背景

使用背景工具类来更改单个进度条的外观。

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 text-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 text-bg-info" 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 text-bg-warning" 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 text-bg-danger" style="width: 100%">100%</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: var(--#{$prefix}progress-height); }
  }
}

进度条

它是如何工作的

杆尺寸

宽度

身高

标签

长标签

背景

多个栏

条纹

动画条纹

CSS

变量

Sass 变量

关键帧