加载效果是现代Web应用中的重要组成部分，它们能够：
Bootstrap 4 引入了Spinner组件，用于表示加载状态。它们使用纯CSS构建，不需要额外的JavaScript。
使用 .spinner-border 类创建旋转的圆圈spinner：
<div class="spinner-border" role="status">
<span class="sr-only">加载中...</span>
</div>
<div class="spinner-border text-primary" role="status">
<span class="sr-only">加载中...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">加载中...</span>
</div>
使用 .spinner-border-sm 创建小尺寸spinner，或通过CSS自定义尺寸：
<!-- 小尺寸 -->
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">加载中...</span>
</div>
<!-- 自定义大尺寸 -->
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">加载中...</span>
</div>
使用 .spinner-grow 类创建脉动效果的spinner：
<div class="spinner-grow" role="status">
<span class="sr-only">加载中...</span>
</div>
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">加载中...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">加载中...</span>
</div>
将Spinner与按钮结合使用，创建加载状态的按钮：
点击按钮查看加载效果：
<button class="btn btn-primary btn-loading" id="btnLoading">
<span class="btn-text">提交表单</span>
<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">加载中...</span>
</div>
</button>
<script>
document.getElementById('btnLoading').addEventListener('click', function() {
this.classList.add('loading');
setTimeout(() => {
this.classList.remove('loading');
}, 3000);
});
</script>
创建全屏加载效果，适用于页面初始化或内容加载：
点击按钮查看全屏加载效果：
<!-- 加载覆盖层 -->
<div class="loading-overlay" id="pageLoader">
<div class="loading-content">
<div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
<span class="sr-only">加载中...</span>
</div>
<h4 class="mt-3">页面加载中...</h4>
</div>
</div>
<script>
document.getElementById('showPageLoader').addEventListener('click', function() {
document.getElementById('pageLoader').classList.add('show');
setTimeout(() => {
document.getElementById('pageLoader').classList.remove('show');
}, 3000);
});
</script>
除了Bootstrap自带的Spinner，您还可以创建自定义加载动画：
<!-- 自定义旋转动画 -->
<style>
.custom-spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #6f42c1;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<div class="custom-spinner"></div>
sr-only 类为屏幕阅读器提供文本说明