Bootstrap5 徽章

Bootstrap 5 进度条

使用Bootstrap 5的进度条组件，创建直观的进度指示器和状态展示。

基本进度条 动画进度条

Bootstrap 5 进度条组件

Bootstrap 5 进度条是用于显示任务进度或操作状态的灵活组件。

进度条组件的主要特点：

  • 多种样式 - 基本、条纹、动画等多种样式
  • 语义化颜色 - 使用主题颜色表示不同状态
  • 灵活尺寸 - 可以自定义高度和宽度
  • 动画效果 - 支持进度动画和条纹动画
  • 标签显示 - 可以在进度条内显示文本标签
进度条示例

基本进度条

默认进度条

使用 .progress 和 .progress-bar 类创建基本进度条。

带标签的进度条

在进度条内部显示文本标签。

25%
75% 完成
<!-- 基本进度条 -->
<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: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

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

自定义高度

使用内联样式或CSS自定义进度条高度。

<!-- 自定义高度 -->
<div class="progress" style="height: 5px;">
  <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: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

进度条颜色

使用颜色类为进度条添加语义化颜色。

主要 25%
成功 50%
信息 75%
警告 90%
危险 100% 
<!-- 彩色进度条 -->
<div class="progress">
  <div class="progress-bar bg-primary" 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: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

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

<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 90%" aria-valuenow="90" 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>

渐变进度条

使用CSS渐变创建更丰富的视觉效果。

条纹进度条

基本条纹进度条

使用 .progress-bar-striped 类创建条纹进度条。

<!-- 条纹进度条 -->
<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>

动画条纹进度条

使用 .progress-bar-animated 类为条纹进度条添加动画效果。

<!-- 动画条纹进度条 -->
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
</div>

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

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

多进度条

在单个进度条容器中放置多个进度条，显示多个进度状态。

已完成
进行中
待处理
设计
开发
测试
高优先级
中优先级
低优先级
<!-- 多进度条 -->
<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">已完成</div>
  <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">进行中</div>
  <div class="progress-bar bg-danger" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">待处理</div>
</div>

<div class="progress">
  <div class="progress-bar bg-primary" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">设计</div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">开发</div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">测试</div>
</div>

带边框的多进度条

为多进度条添加边框，增强视觉分离效果。

前端
后端
数据库
计划
执行
完成

动画进度条

使用CSS动画或JavaScript创建动态进度条效果。

加载中动画

使用CSS关键帧动画

进度递增动画
0%
不确定进度

条纹动画表示进行中

进度条应用场景

文件上传进度

使用进度条显示文件上传进度。

文件上传
0%

技能展示

使用进度条展示技能水平。

HTML/CSS 90%
JavaScript 75%
Bootstrap 85%

项目进度跟踪

使用多进度条跟踪项目不同阶段的进度。

项目: 网站重新设计
总体进度 65%
设计阶段 100%
开发阶段 75%
测试阶段 20%

目标完成度

使用进度条显示目标完成情况。

月度销售目标
75% 完成

已完成 ¥75,000 / 目标 ¥100,000

交互进度条演示

进度条控制器

使用滑块控制进度条的值。

50%

进度条生成器

自定义创建进度条。

进度条使用最佳实践

语义化设计
  • 根据进度状态选择合适的颜色
  • 成功进度使用绿色，警告进度使用黄色
  • 错误或停滞进度使用红色
  • 信息性进度使用蓝色
用户体验
  • 为进度条提供清晰的标签和说明
  • 在长时间操作中使用动画效果
  • 考虑提供取消或暂停操作的选项
  • 确保进度条在各种设备上清晰可见
可访问性
  • 为进度条提供适当的ARIA属性
  • 确保进度条有足够的颜色对比度
  • 为屏幕阅读器用户提供进度状态描述
  • 考虑使用辅助文本描述进度
性能考虑
  • 避免过度使用动画效果影响性能
  • 在大量进度条时考虑使用虚拟滚动
  • 优化JavaScript更新频率
  • 考虑使用CSS动画代替JavaScript动画

掌握进度条后，下一步学习卡片组件

进度条是状态展示的重要元素，接下来可以学习如何使用卡片组件创建丰富的内容容器。

学习卡片组件 查看所有组件
上一章: 徽章 下一章: 按钮组