进度条

它是如何工作的

进度组件由两个 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 theme-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 theme-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 theme-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 theme-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

变量

Progress 在 .progress 上使用本地 CSS 变量以实现实时自定义。CSS 变量的值是从每个组件独有的 Sass map生成的，并应用于前述类。

scss/_progress.scss

// stylelint-disable-next-line scss/dollar-variable-default
$progress-tokens: defaults(
  (
    --progress-height: 1rem,
    --progress-font-size: var(--font-size-sm),
    --progress-bg: var(--bg-2),
    --progress-border-radius: var(--radius-5),
    --progress-box-shadow: var(--box-shadow-inset),
    --progress-bar-color: var(--white),
    --progress-bar-bg: var(--primary-bg),
    --progress-bar-transition: width .6s ease,
    --progress-bar-animation: progress-bar-stripes 1s linear infinite,
  ),
  $progress-tokens
);

关键帧

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

scss/_progress.scss

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

本页目录

它是如何工作的

杆尺寸

宽度

身高

标签

长标签

背景

多个栏

条纹

动画条纹

CSS

变量

关键帧