进展

进度-Bootstrap 5和Material Design 2.0组件

有关使用自定义进度条(支持堆叠条)的文档和示例, 动画背景和文本标签。


基本例子


          <div class="progress">
            <div
              class="progress-bar"
              role="progressbar"
              style="width: 75%"
              aria-valuenow="75"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
        

这个怎么运作

进度组件由两个HTML元素构建,一些CSS设置宽度,另一些 属性。我们不使用 HTML5 <progress> 元件, 确保您可以堆叠进度条,为其设置动画并在其上放置文本标签。

  • 我们使用 .progress 作为包装器来指示进度的最大值 酒吧。
  • 我们使用内部的 .progress-bar 指示到目前为止的进度。
  • .progress-bar 需要内联样式,实用程序类或自定义CSS进行设置 他们的宽度。
  • .progress-bar 还需要一些 role aria 属性以使其可访问。

将所有内容放在一起,您将看到以下示例。






          <div class="progress">
            <div
              class="progress-bar"
              role="progressbar"
              aria-valuenow="0"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
          <div class="progress">
            <div
              class="progress-bar"
              role="progressbar"
              style="width: 25%"
              aria-valuenow="25"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
          <div class="progress">
            <div
              class="progress-bar"
              role="progressbar"
              style="width: 50%"
              aria-valuenow="50"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
          <div class="progress">
            <div
              class="progress-bar"
              role="progressbar"
              style="width: 75%"
              aria-valuenow="75"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
          <div class="progress">
            <div
              class="progress-bar"
              role="progressbar"
              style="width: 100%"
              aria-valuenow="100"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
        

MDB提供了一些 设置宽度的实用程序. D根据您的需求,这些可能有助于快速配置进度。


          <div class="progress">
            <div
              class="progress-bar w-75"
              role="progressbar"
              aria-valuenow="75"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
        

标签

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

要使标签可见,您需要为条形图设置适当的高度。

25%

          <div class="progress" style="height: 20px">
            <div
              class="progress-bar"
              role="progressbar"
              style="width: 25%"
              aria-valuenow="25"
              aria-valuemin="0"
              aria-valuemax="100"
            >
              25%
            </div>
          </div>
        

Height

我们只在 .progress 上设置一个 height 值,因此,如果您更改该值 内部 .progress-bar 的值将自动相应地调整大小。



          <div class="progress" style="height: 1px">
            <div
              class="progress-bar"
              role="progressbar"
              style="width: 25%"
              aria-valuenow="25"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
          <div class="progress" style="height: 20px">
            <div
              class="progress-bar"
              role="progressbar"
              style="width: 25%"
              aria-valuenow="25"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
        

色彩

使用后台实用程序类来更改单个进度条的外观。





          <div class="progress">
            <div
              class="progress-bar bg-success"
              role="progressbar"
              style="width: 25%"
              aria-valuenow="25"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
          <div class="progress">
            <div
              class="progress-bar bg-info"
              role="progressbar"
              style="width: 50%"
              aria-valuenow="50"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
          <div class="progress">
            <div
              class="progress-bar bg-warning"
              role="progressbar"
              style="width: 75%"
              aria-valuenow="75"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
          <div class="progress">
            <div
              class="progress-bar bg-danger"
              role="progressbar"
              style="width: 100%"
              aria-valuenow="100"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
        

多个酒吧

如果需要,在进度组件中包括多个进度栏。


          <div class="progress">
            <div
              class="progress-bar"
              role="progressbar"
              style="width: 15%"
              aria-valuenow="15"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
            <div
              class="progress-bar bg-success"
              role="progressbar"
              style="width: 30%"
              aria-valuenow="30"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
            <div
              class="progress-bar bg-info"
              role="progressbar"
              style="width: 20%"
              aria-valuenow="20"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
        

条状

.progress-bar-striped 添加到任何 .progress-bar 中,以通过 进度栏背景颜色上的CSS渐变。






          <div class="progress">
            <div
              class="progress-bar progress-bar-striped"
              role="progressbar"
              style="width: 10%"
              aria-valuenow="10"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
          <div class="progress">
            <div
              class="progress-bar progress-bar-striped bg-success"
              role="progressbar"
              style="width: 25%"
              aria-valuenow="25"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
          <div class="progress">
            <div
              class="progress-bar progress-bar-striped bg-info"
              role="progressbar"
              style="width: 50%"
              aria-valuenow="50"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
          <div class="progress">
            <div
              class="progress-bar progress-bar-striped bg-warning"
              role="progressbar"
              style="width: 75%"
              aria-valuenow="75"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
          <div class="progress">
            <div
              class="progress-bar progress-bar-striped bg-danger"
              role="progressbar"
              style="width: 100%"
              aria-valuenow="100"
              aria-valuemin="0"
              aria-valuemax="100"
            ></div>
          </div>
        

动画条纹

条纹渐变也可以设置为动画。加 将 .progress-bar-animated 转换为 .progress-bar ,以对条纹进行动画处理 通过CSS3动画向左移动。


          <div class="progress">
            <div
              class="progress-bar progress-bar-striped progress-bar-animated"
              role="progressbar"
              aria-valuenow="75"
              aria-valuemin="0"
              aria-valuemax="100"
              style="width: 75%"
            ></div>
          </div>