今天要介紹，如何使用 border 和 @keyframes 創建旋轉的圓形加載動畫

HTML

創建一個 div 元素，並應用 .loader類 來表示加載動畫

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

CSS

a. 基本設定

將內容居中對齊，調背景顏色

body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f0f0f0;
}

b. .loader 樣式

.loader {
    border: 8px solid rgb(238, 238, 238);
    border-top: 8px solid #3498db; 
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 1s linear infinite;
}

• border ： 創建一個圓形的邊框，設置元素的邊框寬度為 8 像素
• border-top : 單獨設置頂部邊框的顏色為藍色
• border-radius ： 將邊框半徑設置為 50%，方形的元素會變成圓形
• width、height : 設定元素的寬度和高度，大小是 80 像素的圓形
• animation :
  • spin : 在 @keyframes 中的動畫名稱
  • ls : 動畫的持續時間，完成一個旋轉週期的時間是 1 秒
  • linear : 動畫的速度是線性的，整個旋轉過程中的速度保持不變
  • infinite : 動畫是無限循環的，會一直旋轉不會停止

c. @keyframes spin 動畫定義

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

• @keyframes spin ：定義動畫的名稱為 spin，這個名稱需要在 .loader 的 animation 屬性中引用
• 0% : 表示動畫的起點
• 100% : 表示動畫的終點
• transform : rotate() : 表示旋轉
  • 0deg：元素在動畫開始時不會旋轉，保持在 0 度
  • 360deg : 元素將會旋轉 360 度，完成一整圈的旋轉

這樣，元素會從 0 度旋轉到 360 度並形成無縫的循環，因為 animation 是無限循環 (infinite) 的，所以它將會一直旋轉下去

d. 結果呈現