Bootstrap5 进度条学习笔记

Bootstrap5 是目前最流行的前端开发框架之一，它提供了丰富的组件和样式，可以快速构建现代化的网站和应用程序。其中进度条是Bootstrap5中常用的组件之一，可以用于显示任务的进度或者数据的加载状态。

基本使用方法

Bootstrap5的进度条组件有两种不同的样式：条形进度条和圆形进度条。下面分别介绍它们的基本使用方法。

条形进度条

条形进度条是Bootstrap5中最常用的一种进度条。使用方法如下：

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

以上代码中，progress是进度条组件的父容器，progress-bar是进度条的子容器，width属性控制进度条的长度，aria-valuenow表示当前进度的百分比，aria-valuemin表示进度的最小值，aria-valuemax表示进度的最大值。

圆形进度条

圆形进度条是Bootstrap5中比较新的一种进度条，使用方法如下:

htmlCopy Code
<div class="progress-circle" data-value="0.75">
  <div class="progress-circle-inner">
    <svg>
      <circle cx="50%" cy="50%" r="70"></circle>
      <circle class="progress-circle-value" cx="50%" cy="50%" r="70"></circle>
    </svg>
    <div class="progress-circle-text">
      <span></span>
    </div>
  </div>
</div>

以上代码中，progress-circle是圆形进度条的父容器，data-value属性控制进度的百分比，progress-circle-inner是进度条的子容器，progress-circle-value是表示进度的圆形。

实例演示

下面展示一个简单的实例，演示如何在Bootstrap5中使用进度条组件。

条形进度条实例

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

效果如下：

圆形进度条实例

htmlCopy Code
<div class="progress-circle" data-value="0.75">
  <div class="progress-circle-inner">
    <svg>
      <circle cx="50%" cy="50%" r="70"></circle>
      <circle class="progress-circle-value" cx="50%" cy="50%" r="70"></circle>
    </svg>
    <div class="progress-circle-text">
      <span>75%</span>
    </div>
  </div>
</div>

效果如下：

以上就是Bootstrap5进度条组件的基本使用方法和实例演示，希望对你有所帮助！