进度条是用户界面中重要的反馈组件，用于显示任务进度、加载状态或完成比例。Bootstrap 4 提供了灵活多样的进度条样式和动画效果，帮助用户了解当前操作的状态。
Bootstrap 4 提供了简单易用的进度条组件，通过设置宽度百分比来显示进度。
<!-- 基本进度条 -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- 50% 进度条 -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- 75% 进度条 -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- 100% 进度条 -->
<div class="progress">
<div class="progress-bar" 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: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<!-- 带状态标签的进度条 -->
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50% 完成</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 4 提供了多种语义颜色的进度条，用于传达不同类型的进度信息。
<!-- 主要颜色进度条 -->
<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>
<!-- 成功颜色进度条 -->
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- 信息颜色进度条 -->
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- 警告颜色进度条 -->
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80" 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>
使用 .progress-bar-striped 类创建带有条纹效果的进度条。
<!-- 基本条纹进度条 -->
<div class="progress">
<div class="progress-bar progress-bar-striped" 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-success" 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-info" 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-warning" role="progressbar" style="width: 100%" aria-valuenow="100" 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: 75%" aria-valuenow="75" 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: 50%" aria-valuenow="50" 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: 65%" aria-valuenow="65" 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 class="progress-bar bg-warning" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">进行中</div>
<div class="progress-bar bg-danger" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">待处理</div>
</div>
<!-- 项目阶段堆叠进度条 -->
<div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">设计</div>
<div class="progress-bar bg-info" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">开发</div>
<div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">测试</div>
</div>
您可以通过设置高度来调整进度条的尺寸。
<style>
.progress-thin {
height: 6px;
}
.progress-thick {
height: 30px;
}
</style>
<!-- 细进度条 -->
<div class="progress progress-thin">
<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 progress-thick">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
您可以通过添加自定义CSS类来创建独特的进度条样式。
<style>
.progress-custom {
height: 20px;
border-radius: 10px;
overflow: hidden;
background-color: #e9ecef;
}
.progress-custom .progress-bar {
background: linear-gradient(45deg, #6f42c1, #e83e8c);
border-radius: 10px;
}
.progress-with-icon .progress-bar {
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 10px;
color: white;
font-weight: bold;
}
</style>
<!-- 渐变进度条 -->
<div class="progress progress-custom">
<div class="progress-bar" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<!-- 带图标的进度条 -->
<div class="progress progress-thick progress-with-icon">
<div class="progress-bar bg-info" role="progressbar" style="width: 45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
<i class="fas fa-cloud-download-alt"></i> 45%
</div>
</div>
<!-- 圆角进度条 -->
<div class="progress" style="border-radius: 20px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 80%; border-radius: 20px;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
以下是一些在实际项目中如何使用进度条的示例。
上传中...
总体进度: 70%
已使用 85% 的存储空间
恭喜！您已经学习了Bootstrap 4进度条组件的核心概念和功能。进度条是创建直观用户界面的重要元素，掌握这些技巧将帮助您设计出更好的用户体验。
继续学习下一章：Bootstrap 4 卡片组件