在 Bootstrap 4 中，加载效果通常用于表示正在进行某个任务，比如等待数据加载、文件上传或页面渲染等。Bootstrap 提供了一些内置的组件，可以很方便地实现加载效果，包括 进度条、加载动画（spinner）和 占位符（skeleton loader）。
1. 加载动画（Spinner）
Bootstrap 4 提供了一个简单的 spinner（加载动画）组件，通常用于在页面加载或等待数据时显示一个旋转的图标。
示例：
<!-- 基本加载动画 -->
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<!-- 加载动画（小型）-->
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
<!-- 环形加载动画 -->
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
<!-- 加载动画（小型，环形）-->
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
解释：
spinner-border：基本的旋转加载动画。spinner-grow：环形加载动画。spinner-border-sm和spinner-grow-sm：小型加载动画。role="status"：指定加载动画的角色，帮助屏幕阅读器进行标记。sr-only：用于在屏幕上隐藏文本，但保留给屏幕阅读器。
2. 加载动画的颜色
Bootstrap 4 的加载动画默认是灰色的，但可以通过 text-* 类来更改加载动画的颜色。
示例：
<!-- 蓝色旋转加载动画 -->
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<!-- 绿色环形加载动画 -->
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<!-- 红色旋转加载动画 -->
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
解释：
- 使用
text-primary、text-success、text-danger等类来控制加载动画的颜色（如蓝色、绿色、红色等）。
3. 加载占位符（Skeleton Loader）
虽然 Bootstrap 4 本身并没有直接提供 skeleton loader（骨架屏）组件，但你可以使用 CSS 自定义样式来实现占位符效果，模拟加载过程中的内容框架。
示例：
<!-- Skeleton Loader -->
<div class="skeleton-loader" style="width: 100%; height: 200px; background: #ddd; animation: pulse 1.5s infinite ease-in-out;"></div>
<style>
@keyframes pulse {
0% { background-color: #ddd; }
50% { background-color: #f0f0f0; }
100% { background-color: #ddd; }
}
</style>
解释：
- 使用
@keyframes动画，创建一个 pulse 效果（轻微闪烁的背景色）。 background-color属性定义了一个灰色渐变的效果，模拟加载中的占位符。
4. 进度条（Progress Bar）
进度条也是一种常见的加载效果，用于显示任务的进度。Bootstrap 提供了 progress 和 progress-bar 类，可以快速实现一个进度条。
示例：
<!-- 加载进度条 -->
<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">
75%
</div>
</div>
解释：
progress-bar-striped：为进度条添加条纹效果。progress-bar-animated：为进度条添加动画效果，使进度条动态更新。style="width: 75%"：设置进度条的进度。
5. 模态框（Modal）作为加载效果
你还可以使用 模态框（Modal）显示一个加载状态，通常用于阻止用户与页面进行互动，直到任务完成。
示例：
<!-- 模态框加载效果 -->
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="loadingModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<p>Loading...</p>
</div>
</div>
</div>
</div>
<script>
// 显示模态框
$('#loadingModal').modal('show');
// 模拟加载完成，隐藏模态框
setTimeout(function() {
$('#loadingModal').modal('hide');
}, 3000); // 假设任务完成
</script>
解释：
- 使用 Bootstrap 的模态框组件来显示一个加载动画，并将其置于页面中央。
spinner-border创建一个旋转的加载动画。setTimeout用来模拟加载任务的完成，3秒后关闭模态框。
6. Custom Loading (自定义加载效果)
如果你需要一个自定义的加载效果，可以使用 CSS 来定义加载动画，如旋转图标、变化的颜色或波浪效果。
示例：
<!-- 自定义加载效果 -->
<div class="loader">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
<style>
.loader {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
.dot {
width: 10px;
height: 10px;
margin: 0 5px;
background-color: #007bff;
border-radius: 50%;
animation: bounce 0.6s infinite alternate;
}
.dot:nth-child(1) {
animation-delay: 0s;
}
.dot:nth-child(2) {
animation-delay: 0.2s;
}
.dot:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes bounce {
0% { transform: translateY(0); }
100% { transform: translateY(-20px); }
}
</style>
解释：
- 通过 CSS
@keyframes动画和animation-delay属性，创建一个有三个小圆点的跳动加载效果。
总结
- Spinner（加载动画）：可以用
spinner-border或spinner-grow创建旋转或环形的加载动画，支持颜色和大小调整。 - 进度条：使用
progress和progress-bar类实现进度条，支持动态更新和条纹/动画效果。 - 模态框（Modal）：用模态框封装加载动画，通常用于页面加载期间阻止用户交互。
- Skeleton Loader（骨架屏）：通过自定义 CSS 创建加载占位符，模拟内容加载中的视觉效果。
- 自定义加载效果：可以通过 CSS 创建各种自定义的加载动画，如跳动的小圆点。
这些加载效果可以帮助提升用户体验，确保在页面或任务加载时，用户清楚地知道进度。如果你有更具体的需求或问题，随时告诉我！
发表回复