Bootstrap 加载效果

概述

Bootstrap 提供了两种加载动画效果（Spinners）：边框旋转器和增长旋转器。这些加载指示器可以用于显示组件或页面的加载状态。

边框旋转器

使用 .spinner-border 类创建边框旋转加载效果：

html

<div class="spinner-border" role="status">
    <span class="visually-hidden">加载中...</span>
</div>

颜色变体

html

<div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">加载中...</span>
</div>
<div class="spinner-border text-secondary" role="status">
    <span class="visually-hidden">加载中...</span>
</div>
<div class="spinner-border text-success" role="status">
    <span class="visually-hidden">加载中...</span>
</div>
<div class="spinner-border text-danger" role="status">
    <span class="visually-hidden">加载中...</span>
</div>
<div class="spinner-border text-warning" role="status">
    <span class="visually-hidden">加载中...</span>
</div>
<div class="spinner-border text-info" role="status">
    <span class="visually-hidden">加载中...</span>
</div>
<div class="spinner-border text-light" role="status">
    <span class="visually-hidden">加载中...</span>
</div>
<div class="spinner-border text-dark" role="status">
    <span class="visually-hidden">加载中...</span>
</div>

增长旋转器

使用 .spinner-grow 类创建增长加载效果：

html

<div class="spinner-grow" role="status">
    <span class="visually-hidden">加载中...</span>
</div>

颜色变体

html

<div class="spinner-grow text-primary" role="status">
    <span class="visually-hidden">加载中...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
    <span class="visually-hidden">加载中...</span>
</div>
<div class="spinner-grow text-success" role="status">
    <span class="visually-hidden">加载中...</span>
</div>
<div class="spinner-grow text-danger" role="status">
    <span class="visually-hidden">加载中...</span>
</div>
<div class="spinner-grow text-warning" role="status">
    <span class="visually-hidden">加载中...</span>
</div>
<div class="spinner-grow text-info" role="status">
    <span class="visually-hidden">加载中...</span>
</div>
<div class="spinner-grow text-light" role="status">
    <span class="visually-hidden">加载中...</span>
</div>
<div class="spinner-grow text-dark" role="status">
    <span class="visually-hidden">加载中...</span>
</div>

尺寸

小尺寸

html

<!-- 小边框旋转器 -->
<div class="spinner-border spinner-border-sm" role="status">
    <span class="visually-hidden">加载中...</span>
</div>

<!-- 小增长旋转器 -->
<div class="spinner-grow spinner-grow-sm" role="status">
    <span class="visually-hidden">加载中...</span>
</div>

自定义尺寸

使用内联样式或自定义 CSS 调整尺寸：

html

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
    <span class="visually-hidden">加载中...</span>
</div>

<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
    <span class="visually-hidden">加载中...</span>
</div>

按钮中的加载器

边框旋转器

html

<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    <span class="visually-hidden">加载中...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    加载中...
</button>

增长旋转器

html

<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
    <span class="visually-hidden">加载中...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
    加载中...
</button>

对齐方式

使用 Flexbox

html

<div class="d-flex justify-content-center">
    <div class="spinner-border" role="status">
        <span class="visually-hidden">加载中...</span>
    </div>
</div>

使用浮动

html

<div class="clearfix">
    <div class="spinner-border float-end" role="status">
        <span class="visually-hidden">加载中...</span>
    </div>
</div>

使用文本对齐

html

<div class="text-center">
    <div class="spinner-border" role="status">
        <span class="visually-hidden">加载中...</span>
    </div>
</div>

实际示例

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 加载效果示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-5">
        <h1>Bootstrap 加载效果示例</h1>
        
        <!-- 边框旋转器 -->
        <h2>边框旋转器</h2>
        <div class="mb-4">
            <div class="spinner-border text-primary me-2" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-secondary me-2" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-success me-2" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-danger me-2" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-warning me-2" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-info me-2" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border text-dark" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
        </div>
        
        <!-- 增长旋转器 -->
        <h2>增长旋转器</h2>
        <div class="mb-4">
            <div class="spinner-grow text-primary me-2" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-secondary me-2" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-success me-2" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-danger me-2" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-warning me-2" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-info me-2" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow text-dark" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
        </div>
        
        <!-- 尺寸 -->
        <h2>不同尺寸</h2>
        <div class="mb-4">
            <div class="spinner-border spinner-border-sm me-2" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border me-2" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-border me-2" style="width: 3rem; height: 3rem;" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            
            <div class="spinner-grow spinner-grow-sm me-2" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow me-2" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
        </div>
        
        <!-- 按钮中的加载器 -->
        <h2>按钮中的加载器</h2>
        <div class="mb-4">
            <button class="btn btn-primary me-2" type="button" disabled>
                <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                加载中...
            </button>
            <button class="btn btn-success me-2" type="button" disabled>
                <span class="spinner-grow spinner-grow-sm me-2" role="status" aria-hidden="true"></span>
                处理中...
            </button>
            <button class="btn btn-danger me-2" type="button" disabled>
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                <span class="visually-hidden">删除中...</span>
            </button>
        </div>
        
        <!-- 对齐方式 -->
        <h2>对齐方式</h2>
        
        <h4>居中对齐</h4>
        <div class="d-flex justify-content-center mb-3">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
        </div>
        
        <h4>文本居中</h4>
        <div class="text-center mb-3">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
        </div>
        
        <h4>右对齐</h4>
        <div class="clearfix mb-3">
            <div class="spinner-border float-end" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
        </div>
        
        <!-- 实际应用场景 -->
        <h2>实际应用场景</h2>
        
        <!-- 加载卡片 -->
        <h4>加载卡片</h4>
        <div class="card mb-4" style="width: 18rem;">
            <div class="card-body text-center">
                <div class="spinner-border text-primary mb-3" role="status">
                    <span class="visually-hidden">加载中...</span>
                </div>
                <p class="card-text">正在加载数据...</p>
            </div>
        </div>
        
        <!-- 表单提交 -->
        <h4>表单提交</h4>
        <form class="mb-4">
            <div class="mb-3">
                <label for="username" class="form-label">用户名</label>
                <input type="text" class="form-control" id="username">
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">邮箱</label>
                <input type="email" class="form-control" id="email">
            </div>
            <button type="submit" class="btn btn-primary me-2">提交</button>
            <button class="btn btn-primary" type="button" disabled>
                <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                提交中...
            </button>
        </form>
        
        <!-- 页面加载覆盖层 -->
        <h4>页面加载覆盖层</h4>
        <div class="position-relative" style="height: 200px; background-color: #f8f9fa;">
            <div class="position-absolute top-50 start-50 translate-middle">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">加载中...</span>
                </div>
                <p class="mt-2">加载中，请稍候...</p>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

最佳实践

1. 可访问性

html

<!-- 始终包含屏幕阅读器文本 -->
<div class="spinner-border" role="status">
    <span class="visually-hidden">加载中...</span>
</div>

<!-- 在按钮中使用时，提供有意义的文本 -->
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    正在保存...
</button>

2. 禁用交互

html

<!-- 加载时禁用按钮 -->
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
    加载中...
</button>

3. 适当的颜色

html

<!-- 根据上下文选择合适的颜色 -->
<button class="btn btn-success" type="button" disabled>
    <span class="spinner-border spinner-border-sm text-light me-2" role="status" aria-hidden="true"></span>
    处理中...
</button>

JavaScript 控制

html

<button id="loadBtn" class="btn btn-primary" type="button">
    <span id="btnText">加载数据</span>
    <span id="btnSpinner" class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>
</button>

<script>
document.getElementById('loadBtn').addEventListener('click', function() {
    const btn = this;
    const btnText = document.getElementById('btnText');
    const btnSpinner = document.getElementById('btnSpinner');
    
    // 显示加载状态
    btn.disabled = true;
    btnText.textContent = '加载中...';
    btnSpinner.classList.remove('d-none');
    
    // 模拟异步操作
    setTimeout(function() {
        // 恢复按钮状态
        btn.disabled = false;
        btnText.textContent = '加载数据';
        btnSpinner.classList.add('d-none');
    }, 3000);
});
</script>

下一步

现在你已经掌握了 Bootstrap 加载效果的使用方法，接下来我们将学习分页组件。

下一章：Bootstrap 分页 →

Bootstrap 加载效果 ​

概述 ​

边框旋转器 ​

颜色变体 ​

增长旋转器 ​

颜色变体 ​

尺寸 ​

小尺寸 ​

自定义尺寸 ​

按钮中的加载器 ​

边框旋转器 ​

增长旋转器 ​

对齐方式 ​

使用 Flexbox ​

使用浮动 ​

使用文本对齐 ​

实际示例 ​

最佳实践 ​

1. 可访问性 ​

2. 禁用交互 ​

3. 适当的颜色 ​

JavaScript 控制 ​

下一步 ​

Bootstrap 加载效果

概述

边框旋转器

颜色变体

增长旋转器

颜色变体

尺寸

小尺寸

自定义尺寸

按钮中的加载器

边框旋转器

增长旋转器

对齐方式

使用 Flexbox

使用浮动

使用文本对齐

实际示例

最佳实践

1. 可访问性

2. 禁用交互

3. 适当的颜色

JavaScript 控制

下一步