CSS - 載入器

**CSS 載入器**是用於指示網頁載入過程的動畫效果。它們使用 CSS 實現，可以應用於網頁上的各種元素，例如旋轉器或載入進度條。CSS 載入器通常用於透過視覺方式指示內容正在載入或處理來改善使用者體驗。

CSS 載入器示例

在這裡你可以看到什麼是 CSS 載入器，你可能在不同的網站上見過這種載入動畫。

如何建立一個 CSS 載入器？

要建立 CSS 載入器，請按照以下步驟操作。

**建立 HTML 結構：** 定義一個外部 div 容器元素來容納載入器內容，以及一個內部 div 容器用於載入器。
**設定載入器容器樣式：** 設定載入器容器的**寬度**和**高度**。使用 flex 佈局將載入器元素正確地居中在容器內。
**設定載入器元素樣式：** 也要設定載入器元素的高度和寬度。然後根據所需的載入器寬度和顏色設定**border-top**屬性。還可以使用border-radius值為 50% 以確保載入器為圓形。
**向載入器新增動畫：** 使用**CSS 動畫**來建立載入效果。透過這種方式，你可以新增旋轉效果、縮放或任何其他變換。
**定義動畫的關鍵幀：** 為你的動畫指定**@keyframes 規則**，詳細說明載入器如何隨時間推移移動或變化。

你可以為載入器使用各種顏色組合、形狀、圖案和動畫技巧。嘗試使用 CSS 屬性來建立你的載入器。

對於不支援動畫和變換屬性的瀏覽器，你需要在程式碼中新增**-webkit-**字首。

基本的 CSS 載入器示例

以下示例演示了根據上一節中討論的內容使用 CSS 建立載入器。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 150px;
            background-color: #e0f7e9;
            margin: 0;
        }
    
        .loader {
            border: 8px solid #e0f7e9; 
            border-top: 8px solid #34a853; 
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: innerFrame-spin 2s ease infinite;
        }
        
        @keyframes innerFrame-spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="loader"> </div>
    </div>
</body>

</html>

建立脈衝點載入器

脈衝點載入器通常在啟動系統時用於 Windows 作業系統。我們使用載入器內的六個 div 元素建立了這個載入器，每個元素都使用偽類**:nth-child**設定了不同的動畫延遲。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 150px;
            background-color: #e0f7e9;
            margin: 0;
        }
        
        .PulsingDotsLoader {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 60px;
            height: 60px;
        }
        
        .PulsingDotsLoader div {
            width: 12px;
            height: 12px;
            background-color: #34a853;
            border-radius: 50%;
            animation: PulsingDotsLoader-animation 1.2s ease infinite;
        }
        
        .PulsingDotsLoader div:nth-child(1) {
            animation-delay: -0.6s;
        }
        .PulsingDotsLoader div:nth-child(2) {
            animation-delay: -0.5s;
        }
        .PulsingDotsLoader div:nth-child(3) {
            animation-delay: -0.4s;
        }
        .PulsingDotsLoader div:nth-child(4) {
            animation-delay: -0.3s;
        }
        .PulsingDotsLoader div:nth-child(5) {
            animation-delay: -0.2s;
        }
        .PulsingDotsLoader div:nth-child(6) {
            animation-delay: -0.1s;
        }
        
        @keyframes PulsingDotsLoader-animation {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(0.5);
                opacity: 0.3;
            }
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="PulsingDotsLoader">
            <div> </div>
            <div> </div>
            <div> </div>
            <div> </div>
            <div> </div>
            <div> </div>
        </div>
    </div>
</body>

</html>

不同型別的旋轉載入器

此示例顯示了具有多個旋轉器的載入器。

第一個載入器有兩個旋轉器，因為我們定義了屬性**border-top**和**border-bottom**。
對於第二個載入器，我們除了之前定義的頂部和底部值之外，還定義了**border-right**，這使得它成為一個三個旋轉器的載入器。
對於第三個載入器，我們為 border 屬性定義了四個不同的值，這使得它成為一個四個旋轉器的載入器。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 200px;
            background-color: #f0f0f0; 
        }
        .loader {
            border: 16px solid #f3f3f3; /* Light grey */
            border-top: 16px solid blue;
            border-bottom: 16px solid blue;
            border-radius: 50%;
            width: 70px;
            height: 70px;
            animation: spin 2s linear infinite;
        }
        .second{
            border-right: 16px solid blue;
        }
        .third{
            border-top: 16px solid #ADD8E6;   /* Light Blue */
            border-right: 16px solid #87CEEB; /* Sky Blue */
            border-bottom: 16px solid #1E90FF; /* Dodger Blue */
            border-left: 16px solid #4169E1;  /* Royal Blue */
        }

        @keyframes spin {
            0% { 
                transform: rotate(0deg); 
            }
            100% { 
                transform: rotate(360deg); 
            }
        }
    </style>
</head>

<body>
    <div class="loader"> </div>
    <div class="loader second"> </div>
    <div class="loader third"> </div>
</body>
</html>

使用漸變的 CSS 載入器

CSS **漸變**可以透過在兩種或多種顏色之間建立平滑過渡來設計載入器元素的自定義顏色。

示例

<html>

<head>
    <style>
        .loader-test {
            width: 50px;
            height: 50px;
            padding: 10px;
            aspect-ratio: 1;
            border-radius: 50%;
            margin: 20px;       
            background: linear-gradient(10deg,#ccc,red);
            mask: conic-gradient(#0000,#000), 
                  linear-gradient(#000 0 0) 
                  content-box;
            -webkit-mask-composite: source-out;
            mask-composite: subtract;
            animation: load 1s linear infinite;
        }
        @keyframes load {
            to{
                transform: rotate(1turn)
            }
        }
    </style>
</head>

<body>
    <div class="loader-test"> </div>
</body>

</html>

列印頁面