Bootstrap5 进度条(Progress)

原创 bootstrap5
半兽人 发表于: 2020-07-15   最后更新时间: 2020-07-16 00:33:32  
{{totalSubscript}} 订阅,906 游览

进度条

本文介绍如何使用Bootstrap自定义进度条,包含支持堆叠的进度条,动画背景和文本标签的。

进度条是如何运行的

进度条组件由两个HTML元素构建而成(设置宽度的CSS和一些属性)。我们没有使用HTML5的<progress>元素,所以你才可以堆叠进度条,对它们进行动画处理,并在上面放置文本标签。

  • 使用.progress作为wrapper来表示进度条的最大值。
  • 我们使用内部的.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>

在线运行

Bootstrap提供了快速配置进度条的方法。

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

在线运行

标签

通过在.progress-bar中放置文本,为你的进度条添加标签。

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

在线运行

高度

我们只在.progress上设置了一个高度值,所以如果你改变了这个值,内部的.progress-bar会相应地自动调整大小。

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</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>

在线运行



您需要解锁本帖隐藏内容请: 点击这里
本帖隐藏的内容



提问