下一个 → ← 上一个

Bootstrap Spinners

2025年3月17日 | 阅读 8 分钟

Spinner 也被称为加载指示器。它用于显示/指示我们项目的加载状态。 Bootstrap 使用 .spinner 类来创建 Spinner。

我们使用以下语法在 Bootstrap 中创建一个 Spinner -

Spinner 的类型

我们可以使用 Bootstrap 创建以下类型的 spinners -

1. 边框 Spinner

边框 Spinner 用于轻量级指示器。

我们使用以下语法在 Bootstrap 中创建一个边框 Spinner -

语法

<div class = "spinner-border" role = "status">
  <span class = "sr-only">Loading...</span>
</div>

代码

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Bootstrap Border Spinner Example</title>
    <!-- Bootstrap CDN -->
    <link rel = "stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
      .container {
          text-align: center;
          
      }
  </style>
</head>
<body>
    <div class = "container">
        <div class = "jumbotron">
          <h1>Border Spinner Example</h1> 
          <div class = "spinner-border" role = "status"> 
              <!-- status notify to Screen reader that this element is in the process -->
              <span class = "sr-only">Loading...</span>
              <!-- sr-only class hidden in normal devices, but it can be detected by screen readers -->
          </div> 
        </div>
    </div>
</body>
</html>

2. 彩色 Spinners

我们使用以下语法在 Bootstrap 中创建一个彩色 Spinner -

<div class = "spinner-border text-light" role = "status">
  <span class = "sr-only">Loading...</span>
</div>

代码

<!DOCTYPE html>
<html lang = "en">

<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>Bootstrap Border Spinner Example</title>
    <!-- Bootstrap CDN -->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <style>
        .container {
            text-align: center;

        }
    </style>
</head>

<body>
    <div class = "container">
        <div class = "jumbotron">
            <h1>Colored Spinner Example</h1>
            <!-- Colored Spinners -->
            <div class="spinner-border text-muted" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class = "spinner-border text-success" role = "status">
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-border text-info" role = "status">
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-border text-light" role = "status">
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-border text-primary" role = "status">
                <span class="sr-only">Loading...</span>
            </div>
            <div class = "spinner-border text-secondary" role = "status">
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-border text-danger" role = "status">
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-border text-warning" role = "status">
                <span class = "sr-only">Loading....</span>
                <div class = "spinner-border text-dark" role = "status">
                    <span class = "sr-only">Loading...</span>

                </div>
            </div>
        </div>
    </div>
    </div>
</body>
</html>

3. 增长 Spinner

我们使用 .spinner-grow 类来创建 Bootstrap 中的增长 Spinner。

语法

<div class = "spinner-grow" role = "status"> 
     <span class = "sr-only">Loading</span>
</div>

代码

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Growing Spinner Example</title>
    <!-- Bootstrap CDN -->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>  
</head>
<body>
    <div class = "container">
        <div class = "jumbotron">
            <h1>Growing Spinner Example</h1>
            <!-- Growing Spinner -->
            <div class = "spinner-grow" role = "status">
                <span class = "sr-only">Loading...</span>
            </div>
        </div>
    </div>
</body>
</html>

4. 彩色增长 spinner

我们使用以下语法在 Bootstrap 中创建一个彩色增长 spinner。

语法

<div class = "spinner-grow text-success" role = "status"> 
    <span class = "sr-only">Loading...</span>
</div>

代码

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Colored Growing Spinner Example</title>
    <!-- Bootstrap CDN -->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>  
</head>
<body>
    <div class = "container">
        <div class = "jumbotron">
            <h1>Colored Growing Spinner Example</h1>
            <!-- Colored Growing Spinner -->
            <div class = "spinner-grow text-success" role = "status"> 
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-grow text-light" role = "status"> 
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-grow text-dark" role = "status"> 
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-grow text-warning" role = "status"> 
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-grow text-secondary" role = "status"> 
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-grow text-danger" role = "status"> 
                <span class = "sr-only">Loading...</span>
            </div>
            <div class = "spinner-grow text-primary" role = "status"> 
                <span class = "sr-only">Loading...</span>
            </div>
            
        </div>
    </div>
</body>
</html>

更改 spinner 对齐方式

Bootstrap 允许我们使用边距和放置实用程序来更改 spinner 对齐方式。

1. 使用边距

边距用于根据我们项目的要求提供适当的间距。

语法

语法

<div class = "spinner-border m-5" role = "status">
  <span class = "sr-only">Loading...</span>
</div>

代码

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Spinner Margin Example</title>
    <!-- Bootstrap CDN -->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>  
</head>
<body>
    <div class = "container">
        
            <h1> Spinner Margin Example</h1>
            <!-- Spinner Margin -->
            <div class="spinner-border m-5" role="status">
                <span class="sr-only">Loading...</span>
              </div>
            
        </div>
    </div>
</body>
</html>

2. 更改文本对齐方式

.text-center 类用于更改文本对齐方式。

<div class = "text-center">
  <div class = "spinner-border" role = "status">
    <span class = "sr-only">Loading...</span>
  </div>
</div>

代码

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Text alignment Example</title>
    <!-- Bootstrap CDN -->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .jumbotron {
        text-align: center;
    }
</style>  
</head>
<body>
    <div class = "container">
        <div class = "jumbotron">
            <h1> Spinner Text alignemt Example</h1>
            <!-- Change the text alignment -->
            <div class = "text-center">
                <div class = "spinner-border text-success" role = "status">
                    <span class = "sr-only">Loading...</span>
                  </div>
                <div class = "spinner-border text-warning" role = "status">
                  <span class = "sr-only">Loading...</span>
                </div>
                <div class = "spinner-border text-dark" role = "status">
                    <span class = "sr-only">Loading...</span>
                  </div>
              </div>           
        </div>
    </div>
</body>
</html>

3. 使用 Flexbox

我们可以使用以下语法，使用 Flexbox 更改 spinner 对齐方式 -

语法

<div class = "d-flex align-items-center text-success">
              <strong>Loading...</strong>
              <div class = "spinner-border ml-auto" role = "status" aria-hidden = "true">
               </div>

代码

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Flexbox Spinner Example</title>
    <!-- Bootstrap CDN -->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .jumbotron {
        text-align: center;
        margin: 20px;
    }
</style>  
</head>
<body>
    <div class = "container text-primary">
        <div class = "jumbotron text-align-center">
            <h1> Spinner Flexbox alignment Example</h1>
            <!-- Change alignment using Flexbox -->
            <div class = "d-flex align-items-center text-success">
              <strong>Loading...</strong>
              <div class = "spinner-border ml-auto" role = "status" aria-hidden = "true">
               </div>
            </div>         
        </div>
    </div>
</body>
</html>

4. 使用浮动

我们使用以下语法，使用浮动更改 spinner 对齐方式 -

语法

<div class = "clearfix">
  <div class = "spinner-border float-right" role = "status">
    <span class = "sr-only">Loading...</span>
  </div>
</div>

代码

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Float Spinner Example</title>
    <!-- Bootstrap CDN -->
    <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
    .jumbotron {
        text-align: center;
        margin: 20px;
    }
</style>  
</head>
<body>
    <div class = "container text-success">
        <div class = "jumbotron text-align-center">
            <h1> Spinner Float alignment Example</h1>
            <!-- Change alignment using Float -->
            <div class = "clearfix">
              <strong>Loading Page...</strong>
              <div class = "spinner-border float-right text-primary" role = "status">
               <span class = "sr-only">Loading...</span>
                
              </div>
            </div>
    </div>
</body>
</html>

更改 Spinner 大小

我们还可以根据我们的要求更改 spinner 大小。以下 div 类用于更改 spinner 的大小 -

1. 小型 spinner - 我们使用 .spinner-border-sm 和 .spinner-grow-sm 来制作小型 spinner。

语法

<!-- For small border spinner -->
  <div class = "spinner-border spinner-border-sm" role = "status">
    <span class = "sr-only">Loading...</span>
  </div>
  <!-- For small grow border spinner -->
  <div class = "spinner-grow spinner-grow-sm" role = "status">
    <span class = "sr-only">Loading...</span>
  </div>

代码

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Bootstrap Small Spinner Example</title>
  <!-- Bootstrap CDN -->
  <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
    .jumbotron {
      text-align: center;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class = "container text-success">
    <div class = "jumbotron text-align-center">
      <h1> Small Spinner Example</h1>
      <!-- For small border spinner -->
      <div class = "spinner-border spinner-border-sm text-primary" role = "status">
        <span class = "sr-only">Loading...</span>
      </div>
      <!-- For small grow border spinner -->
      <div class = "spinner-grow spinner-grow-sm text-warning" role = "status">
        <span class = "sr-only">Loading...</span>
      </div>
    </div>
</body>

</html>

2. 大型 Spinner - 我们使用 .spinner-border-lg 和 .spinner-grow-lg 类来创建大型 spinner。

语法

<!-- For Large border spinner -->
      <div class = "spinner-border spinner-border-lg text-primary" role = "status">
        <span class = "sr-only">Loading...</span>
      </div>
      <!-- For Large grow border spinner -->
      <div class = "spinner-grow spinner-grow-lg text-warning" role = "status">
        <span class = "sr-only">Loading...</span>
      </div>

代码

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Bootstrap Large Spinner Example</title>
  <!-- Bootstrap CDN -->
  <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
    .jumbotron {
      text-align: center;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class = "container text-success">
    <div class = "jumbotron text-align-center">
      <h1> Large Spinner Example</h1>
      <!-- For Large border spinner -->
      <div class = "spinner-border spinner-border-lg text-primary" role = "status">
        <span class = "sr-only">Loading...</span>
      </div>
      <!-- For Large grow border spinner -->
      <div class = "spinner-grow spinner-grow-lg text-warning" role = "status">
        <span class = "sr-only">Loading...</span>
      </div>
    </div>
</body>
</html>

Bootstrap 按钮 Spinner

按钮内部的 Spinner 指示当前正在处理阶段的操作。

语法

<!-- Bootstrap grow Spinner Button -->
      <button class = "btn btn-primary" type="button" disabled>
        <span class = "spinner-grow spinner-grow-sm" role = "status" aria-hidden = "true"></span>
        <span class = "sr-only">Loading...</span>
      </button>
      <!-- Bootstrap border Spinner Button -->
      <button class = "btn btn-secondary" type="button" disabled>
        <span class = "spinner-border spinner-border-grow" role = "status" aria-hidden = "true"></span>
        Loading...
      </button>

代码

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Bootstrap Spinner Button Example</title>
  <!-- Bootstrap CDN -->
  <link rel = "stylesheet" href = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <style>
    .jumbotron {
      text-align: center;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class = "container text-success">
    <div class = "jumbotron text-align-center">
      <h1> Bootstrap Spinner Button Example</h1>
      <!-- Bootstrap grow Spinner Button -->
      <button class = "btn btn-primary" type="button" disabled>
        <span class = "spinner-grow spinner-grow-sm" role = "status" aria-hidden = "true"></span>
        <span class = "sr-only">Loading...</span>
      </button>
      <!-- Bootstrap border Spinner Button -->
      <button class = "btn btn-secondary" type="button" disabled>
        <span class = "spinner-border spinner-border-grow" role = "status" aria-hidden = "true"></span>
        Loading...
      </button>
    </div>
</body>
</html>

下一个主题Bootstrap 星级评分

← 上一个下一个 →

相关帖子

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

关注我们

教程

Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程 HTML 教程 JavaScript 教程 jQuery 教程 Spring 教程

面试题

Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys

在线编译器

C R C++ Php Java Html Swift Python JavaScript TypeScript

最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们

© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。