今天要介紹，如何使用 CSS 漸變和動畫來製作加載進度條效果

HTML

<div class="progress-bar">
    <div class="progress"></div>
</div>

• .progress-bar ： 這個容器是進度條的外框，用來顯示進度條的背景
• .progress ： 是進度條的實際部分，會隨著進度的變化而增加寬度，顯示加載過程

CSS

1. 設置頁面佈局與背景

body {
   margin: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background: #f4f4f4;
   font-family: Arial, sans-serif;
}

• display : 使用 flex 使進度條在頁面中居中顯示
• height : 設置進度條佔據整個視窗的高度，讓進度調在螢幕中央
• background : 設置頁面背景顏色為淺灰色

2. 進度條的基本樣式

.progress-bar {
   width: 50%;
   height: 30px;
   background-color: #e0e0e0;
   border-radius: 15px;
   overflow: hidden;
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

• width、height : 設置進度條的寬度和高度
• background-color: 設置進度條的背景色為灰色
• border-radius : 將進度條的邊角設置為圓角
• overflow :確保進度條內部的內容不會超出容器的邊界
• box-shadow：添加內部陰影，使進度條看起來有凹陷的效果，增強立體感

3. 進度條的動態部分

.progress {
   height: 100%;
   background: linear-gradient(90deg, #99CCFF, #FFB2FF);
   width: 0;
   border-radius: 15px;
   animation: load 5s ease-in-out infinite;
}

• height : 設置進度條的高度與其外部容器一致，佔滿整個進度條的高度
• background:
  • linear-gradient(90deg, #99CCFF, #FFB2FF)：
    應用一個水平（90度）方向的漸變背景，使進度條的顏色從淡藍色（#99CCFF）漸變到淡粉色（#FFB2FF）
• width : 初始狀態下，進度條的寬度為 0，會隨著動畫進行而改變
• animation : 設置動畫效果，控制進度條的動態變化
  • load : 控制進度條寬度的變化
  • ease-in-out : 這個參數讓動畫以較慢的速度開始，然後加速，在結束時再慢下來，讓過程更加平滑、自然
  • infinite : 動畫無限循環，當進度條從 0 到 100% 再回到 0% 之後，動畫會自動重新開始，持續模擬加載效果

4. @keyframes load 動畫

@keyframes load {
   0% {
       width: 0;
   }
   50% {
       width: 100%;
   }
   100% {
       width: 0;
   }
}

• 0%：動畫開始時，進度條的寬度為 0
• 50%：動畫進行到一半時，進度條的寬度達到 100%
• 100%：動畫結束時，進度條的寬度回到 0，形成無縫的循環效果

5. 結果呈現