Skip to main content Skip to docs navigation

进度条

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

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

标签

¥Labels

通过将文本放置在 .progress-bar 中，向进度条添加标签。

¥Add labels to your progress bars by placing text within the .progress-bar.

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

请注意，默认情况下，.progress-bar 内的内容由 overflow: hidden 控制，因此它不会渗出栏外。如果你的进度条比其标签短，内容将被限制并且可能变得不可读。要更改此行为，你可以使用溢出实用程序 中的 .overflow-visible，但请确保还定义显式的文本颜色，以便文本保持可读。但请注意，目前此方法并未考虑颜色模式。

¥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, but make sure to also define an explicit text color so the text remains readable. Be aware though that currently this approach does not take into account color modes.

Long label text for the progress bar, set to a dark color
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>

背景

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

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>

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

¥Alternatively, you can use the new combined color and background helper classes.

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>

多个条形

¥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: $progress-height; }
  }
}