Skip to main content Skip to docs navigation

进度条

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

目录

v5.3.0的新标记 — 我们已弃用以前的进度条HTML结构，并用更可访问的结构替代。以前的结构将在v6之前继续有效。请查看我们的迁移指南了解更改内容。

怎么运行的

🌐 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 作为封装器来指示进度条的最大值。
  • .progress 封装器还需要 role="progressbar" 和 aria 属性以使其可访问，包括一个可访问名称（使用 aria-label、aria-labelledby 或类似方式）。
  • 我们使用内部的 .progress-bar 完全是为了视觉条和标签。
  • .progress-bar 需要内联样式、工具类或自定义 CSS 来设置其宽度。
  • 我们提供了一个特殊的 .progress-stacked 类来创建多个/堆叠的进度条。

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

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

长标签

🌐 Long labels

请注意，默认情况下，.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.

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

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

背景

🌐 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，即可通过 CSS3 动画实现条纹从右向左移动。

🌐 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); }
  }
}