Bootstrap - 載入動畫

上一頁
下一頁

本章將討論 Bootstrap 載入動畫。Bootstrap 載入動畫使用.spinner類顯示專案的載入狀態。

工作原理

  • Bootstrap 載入動畫使用 HTML 和 CSS 顯示專案的載入狀態。不需要 JavaScript 即可構建它們。

  • 需要自定義 JavaScript 來切換它們的可見性。外觀、對齊方式和大小可以使用 Bootstrap 的實用工具類輕鬆自定義。

  • 每個載入動畫都有role="status"和巢狀的<span class="visually-hidden">載入中... </span>以提高可訪問性。

邊框載入動畫

使用.spinner-border類建立輕量級載入指示器。

示例

您可以使用編輯 & 執行選項編輯並執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Border Spinner</h3>
      <div class="spinner-border mt-2" role="status">
        <span class="spinner-grow text-white spinner-grow-sm" role="status"></span>
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

顏色

邊框載入動畫使用currentColor作為其border-color，可以使用文字顏色實用工具類自定義。在標準載入動畫上使用文字顏色實用工具類。

示例

您可以使用編輯 & 執行選項編輯並執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Colored Spinner</h3>
      <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>
    </body>
    </html>
為什麼不使用邊框顏色實用工具類？邊框載入動畫在一側有透明邊框，被.border-{color}實用工具類覆蓋。

增長型載入動畫

  • 您可以將載入動畫的旋轉型別更改為增長型載入動畫。它技術上不會旋轉，但會反覆增長。

  • 使用.spinner-grow類建立增長型載入動畫。

示例

您可以使用編輯 & 執行選項編輯並執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Growing Spinner</h3>
      <div class="spinner-grow" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

此載入動畫使用currentColor透過文字顏色實用工具類更改其外觀。

示例

您可以使用編輯 & 執行選項編輯並執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Growing color Spinners</h3>
      <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-info" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow text-dark" 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-success" 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-danger" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

對齊方式

Bootstrap 載入動畫使用rem、currentColor和display: inline-flex設計。它們易於調整大小、重新著色和對齊。

邊距

對於簡單的間距，可以使用邊距實用工具類，例如.m-4。

示例

您可以使用編輯 & 執行選項編輯並執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h3>Margin</h3>
      <div class="spinner-border m-4" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

位置

可以使用彈性盒子實用工具類、浮動實用工具類或文字對齊實用工具類放置 Bootstrap 載入動畫。

彈性盒子

使用彈性盒子定位類設定載入動畫的位置。

示例

您可以使用編輯 & 執行選項編輯並執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="text-center">Flex placement at start, center, end</h5>
      <div class="d-flex justify-content-start">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
      <div class="d-flex justify-content-center">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
      <div class="d-flex justify-content-end">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
    </body>
    </html>

您可以使用彈性盒子定位更改載入動畫的對齊方式。

示例

您可以使用編輯 & 執行選項編輯並執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="d-flex align-items-end mt-2">
        <h5 class="text-center">Flex placement</h5>
        <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
      </div>
    </body>
    </html>

浮動

使用浮動定位類設定載入動畫的位置。

示例

您可以使用編輯 & 執行選項編輯並執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5>Float placement at start and end</h5>
      <div class="clearfix float-start mt-2">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>

      <div class="clearfix float-end">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
    </body>
    </html>

文字對齊

使用.text-align定位類設定載入動畫專案的位置。

示例

您可以使用編輯 & 執行選項編輯並執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="text-center">Text Align at start, center, end</h5>
      <div class="text-start">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
      <div class="text-center">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
      <div class="text-end">
        <div class="spinner-border" role="status">
          <span class="visually-hidden"></span>
        </div>
      </div>
    </body>
    </html>

大小

載入動畫大小可用於建立各種尺寸的載入動畫。

  • 對於小型載入動畫，使用.spinner-border-sm和.spinner-grow-sm類。

  • 對於中型載入動畫，使用.spinner-border-md和.spinner-grow-md類。

示例

您可以使用編輯 & 執行選項編輯並執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="mt-2">Small Size Spinner</h5>
      <div class="spinner-border spinner-border-sm text" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow spinner-grow-sm" role="status">
        <span class="visually-hidden"></span>
      </div>
      <h5 class="mt-2">Medium Size Spinner</h5>
      <div class="spinner-border spinner-border-md" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow spinner-grow-md" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

要根據需要修改尺寸，請使用自定義 CSS 或內聯樣式。

示例

您可以使用編輯 & 執行選項編輯並執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="mt-2">Spinner using custom CSS</h5>
      <div class="spinner-border" style="width: 2rem; height: 2rem;" role="status">
        <span class="visually-hidden"></span>
      </div>
      <div class="spinner-grow" style="width: 2rem; height: 2rem;" role="status">
        <span class="visually-hidden"></span>
      </div>
    </body>
    </html>

按鈕

  • 按鈕載入動畫用於顯示當前正在處理的操作。如果需要，請將載入動畫元素文字替換為按鈕文字。

  • 使用.btn和.spinner-border類建立載入動畫按鈕。

示例

您可以使用編輯 & 執行選項編輯並執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="mt-2">Spinner Buttons</h5>
      <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-secondary" type="button" disabled>
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
        Wait...
      </button>
    </body>
    </html>

使用.btn和.spinner-grow類建立增長型載入動畫按鈕。

示例

您可以使用編輯 & 執行選項編輯並執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Spinners</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <h5 class="mt-2">Growing Spinner Buttons</h5>
      <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">Wait...</span>
      </button>
      <button class="btn btn-secondary" type="button" disabled>
        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
       Wait...
      </button>
    </body>
    </html>
列印頁面
上一頁
下一頁
廣告