CSS - 載入指示器：初學者指南，打造動態載入動畫

你好啊，未來的網頁開發者們！今天，我們將要進入CSS載入指示器的迷人世界。作為你們親切鄰居的電腦老師，我非常興奮能夠帶領你們踏上這次旅程。別擔心如果你從未寫過一行代碼——我們會從最基礎的知識開始，然後逐步學習。到了這個教學的結尾，你將能夠創建有吸引力的載入動畫，讓你的網站看起來專業且引人入勝。那麼，我們開始吧！

CSS - Loaders

什麼是CSS載入指示器？

在我們開始編寫代碼之前，讓我們先了解CSS載入指示器是什麼，以及它為什麼重要。你有没有訪問過一個網站，並在等待內容加載時看到一個旋轉的圈圈或彈跳的小點？那就是載入指示器！這些動畫為用戶提供視覺反饋，讓他們知道背後有事情正在發生。這就像是告訴你的訪客："請稍等一下，我們正在為你準備東西！"

創建你的第一個載入指示器

現在，讓我們捲起袖子，創造我們的第一個載入指示器。我們會從一些簡單的東西開始，然後逐漸增加複雜度。

CSS載入指示器 - 基本範例

這裡有一個基本的載入指示器，創造一個旋轉的圈圈：

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

.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

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

讓我們分解一下：

我們創建一個帶有類別"loader"的<div>元素。
在我們的CSS中，我們將這個div樣式化成一個圓形，使用border-radius: 50%。
我們給它一個淺灰色的邊框（#f3f3f3）在所有邊上，除了頂邊，那是藍色的（#3498db）。
animation屬性設置我們的旋轉效果：

spin是我們動畫的名稱。
2s意味著動畫完成需要2秒。
linear意味著動畫速度是恆定的。
infinite意味著它將不斷重複。

@keyframes規則定義了動畫期間發生的事情。我們從0度旋轉到360度。

瞧！你已經創造了你的第一個載入指示器。這不是很有趣嗎？

CSS載入指示器 - 使用border-right屬性

現在，讓我們試一個稍微不同的方法。我們將創造一個看起來像順時針"填充"的載入指示器：

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

.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
border-right: 16px solid #3498db;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

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

這裡的主要區別是我們添加了border-right: 16px solid #3498db;。這創造了一個看起來像填充的載入指示器。這就像是看著一個時鐘的指針移動，不是嗎？

CSS載入指示器 - 使用:before和:after

現在，讓我們升級並使用:before和:after偽元素創造一個更複雜的載入指示器。這將給我們一個很酷的"雙環"效果：

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

.loader {
width: 120px;
height: 120px;
position: relative;
}

.loader:before, .loader:after {
content: "";
position: absolute;
border: 8px solid #f3f3f3;
border-radius: 50%;
animation: spin 2s linear infinite;
}

.loader:before {
top: 0;
left: 0;
right: 0;
bottom: 0;
border-top-color: #3498db;
}

.loader:after {
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-top-color: #e74c3c;
animation-delay: 0.5s;
}

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

這個載入指示器創造了兩個旋轉的圓圈：

外圈（:before）帶有藍色的頂邊。
內圈（:after）稍微小一點，有紅色的頂邊，並且在半秒後開始旋轉。

結果是一個迷人的雙環效果。很酷，對吧？

CSS載入指示器 - 使用linear-gradient

作為我們的最後一個技巧，讓我們使用linear-gradient創造一個載入指示器。這將給我們一個平滑的連續顏色過渡：

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

.loader {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(to right, #3498db 50%, #f3f3f3 50%);
animation: spin 1s linear infinite;
}

.loader:before {
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
margin: 10px;
position: relative;
z-index: 1;
}

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

這個載入指示器使用了一個巧妙的技巧：

我們創造了一個半藍半灰的漸變圓形。
然後我們使用:before偽元素在頂部添加一個白色的圓形。
隨著外圈旋轉，它創造了一種平滑的載入動畫的幻覺。

載入指示器方法總結

這裡是我們所涵蓋的方法的快速參考表：

方法	描述	鍵屬性
基本範例	簡單旋轉的圈圈	border, border-radius, animation
border-right	順時針填充效果	border, border-right
:before 和 :after	雙環效果	:before, :after, animation-delay
linear-gradient	平滑顏色過渡	linear-gradient, :before

這就是了！你剛學會了四種不同的方法來創造CSS載入指示器。記住，這些只是起點——隨意實驗顏色、大小和動畫，創造你自己的獨特載入指示器。

當我們結束時，我想分享一個小故事。當我第一次教CSS時，我有一個學生對載入指示器感到沮喪。他說："為什麼麻煩？用戶反正討厭等待！"但當他創造了他的第一個自定義載入指示器時，他的眼睛亮了起來。他意識到即使是一點點的等待也可以通過正確的動畫轉化成愉悅的體驗。這就是CSS載入指示器的力量——它將等待轉化為期待。

所以，去創造吧！實驗這些技術，混合和匹配它們，最重要的是，玩得開心。記住，在網頁開發的世界裡，創造力是你的最佳朋友。開心編程，直到下一次，讓那些載入指示器持續旋轉！

Credits: Image by storyset