进度条

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

v5.3.0 中的新标记 — 我们弃用了之前的进度条 HTML 结构，并将其替换为更易于访问的结构。之前的结构将一直有效到 v6 版本。查看我们的迁移指南中有哪些变化。

¥New markup in v5.3.0 — We’ve deprecated the previous HTML structure for progress bars and replaced it with a more accessible one. The previous structure will continue to work until v6. See what’s changed in our migration guide.

怎么运行的

¥How it works

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

¥Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.

我们使用 .progress 作为封装器来指示进度条的最大值。

¥We use the .progress as a wrapper to indicate the max value of the progress bar.
.progress 封装器还需要 role="progressbar" 和 aria 属性以使其可访问，包括可访问的名称（使用 aria-label、aria-labelledby 或类似名称）。

¥The .progress wrapper also requires a role="progressbar" and aria attributes to make it accessible, including an accessible name (using aria-label, aria-labelledby, or similar).
我们将内部 .progress-bar 纯粹用于视觉栏和标签。

¥We use the inner .progress-bar purely for the visual bar and label.
.progress-bar 需要内联样式、工具类或自定义 CSS 来设置其宽度。

¥The .progress-bar requires an inline style, utility class, or custom CSS to set its width.
我们提供了一个特殊的 .progress-stacked 类来创建多个/堆叠的进度条。

¥We provide a special .progress-stacked class to create multiple/stacked progress bars.

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

¥Put that all together, and you have the following examples.

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>

条形尺寸

¥Bar sizing

宽度

¥Width

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

¥Bootstrap provides a handful of utilities for setting width. Depending on your needs, these may help with quickly configuring the width of the .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 容器上设置了 height 值，因此如果更改该值，内部 .progress-bar 将自动相应地调整大小。

¥You only set a height value on the .progress container, so if you change that value, the inner .progress-bar will automatically resize accordingly.

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>

¥Note that by default, the content inside the .progress-bar is controlled with overflow: hidden, so it doesn’t bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use .overflow-visible from the overflow utilities.

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

¥Labels longer than the progress bar within may not be fully accessible using this method because it relies on the text color having the correct contrast ratio with both the .progress and .progress-bar background colors. Use caution when implementing this example.

如果文本可以与进度条重叠，我们通常建议将标签显示在进度条之外，以提高可访问性。

¥If the text can overlap the progress bar, we often recommend displaying the label outside of the progress bar for better accessibility.

背景

¥Backgrounds

使用后台工具类来更改各个进度条的外观。

¥Use background utility classes to change the appearance of individual progress bars.

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>

Accessibility tip: Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast) or is included through alternative means, such as additional text hidden with the .visually-hidden class.

如果你要向进度条添加自定义背景颜色的标签，请确保也设置适当的文本颜色，以确保标签保持可读性并具有足够的对比度。我们建议使用颜色和背景辅助类。

¥If you’re adding labels to progress bars with a custom background color, make sure to also set an appropriate text color, so the labels remain readable and have sufficient contrast. We recommend using the color and background helper classes.

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>

多个条形

¥Multiple bars

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

¥You can include multiple progress components inside a container with .progress-stacked to create a single stacked progress bar. Note that in this case, the styling to set the visual width of the progress bar must be applied to the .progress elements, rather than the .progress-bars.

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>

有条纹的

¥Striped

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

¥Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.

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>

动画条纹

¥Animated stripes

条纹渐变也可以设置动画。添加 .progress-bar-animated 到 .progress-bar 以通过 C 动画从右到左为条纹设置动画。

¥The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.

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

变量

¥Variables

Added in v5.2.0

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

¥As part of Bootstrap’s evolving CSS variables approach, progress bars now use local CSS variables on .progress for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

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

¥Sass variables

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;

关键帧

¥Keyframes

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

¥Used for creating the CSS animations for .progress-bar-animated. Included in scss/_progress-bar.scss.

scss/_progress.scss

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

进度条

怎么运行的

条形尺寸

宽度

高度

标签

长标签

背景

多个条形

有条纹的

动画条纹

CSS

变量

Sass 变量

关键帧