div 加載動畫（Div Loading Animation）是前端開發中常用的一種技術，用于在數據加載過程中為用戶提供良好的交互體驗。當網頁內容需要從服務器獲取并呈現給用戶時，經常會出現加載時間過長、用戶等待不耐煩的情況。為了解決這個問題，開發者可以通過添加加載動畫來提醒用戶并緩解等待焦慮。本文將介紹幾個使用 div 加載動畫的代碼案例，并提供詳細的解釋。

第一個案例是使用 CSS3 動畫實現一個簡單的加載動畫。

<div class="loading"></div>
<style>
.loading {
width: 40px;
height: 40px;
margin: 0 auto;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 2s linear infinite;
}
<br>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>

該代碼案例中，我們使用一個 div 元素來表示加載動畫。通過設置 div 的樣式，我們定義了寬度、高度、邊框顏色以及邊框圓角等屬性，使其呈現出一個圓形圖案。然后，通過 CSS3 動畫的 @keyframes 規則，我們定義了一個旋轉動畫 spin，旋轉角度從 0 度到 360 度，持續時間為 2 秒，并設置無限循環。

第二個案例是使用 JavaScript 和 CSS 實現一個不斷變化顏色的加載動畫。

<div class="loading"></div>
<style>
.loading {
width: 40px;
height: 40px;
margin: 0 auto;
border-radius: 50%;
animation: color-change 2s linear infinite;
}
<br>
@keyframes color-change {
0% { background-color: #3498db; }
50% { background-color: #f39c12; }
100% { background-color: #27ae60; }
}
</style>
<script>
function changeColor() {
var element = document.querySelector('.loading');
var currentColor = element.style.backgroundColor;
var randomColor = getRandomColor();
<br>
  while (currentColor == randomColor) {
randomColor = getRandomColor();
}
<br>
  element.style.backgroundColor = randomColor;
}
<br>
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
<br>
  for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
<br>
  return color;
}
<br>
setInterval(changeColor, 200);
</script>

該代碼案例中，我們同樣使用一個 div 元素來表示加載動畫，并設置寬度、高度、邊框圓角等樣式。通過 CSS 動畫的 @keyframes 規則，我們定義了一個顏色變化動畫 color-change，動畫從 #3498db 開始，然后變成 #f39c12，最后變成 #27ae60，持續時間為 2 秒，并設置無限循環。同時，我們使用 JavaScript 編寫了一個函數 changeColor，通過獲取當前顏色并隨機生成一個新顏色，并將其應用到 div 元素的背景顏色上，實現每 200 毫秒一次的顏色變化效果。

第三個案例是使用 jQuery 插件實現多種加載動畫效果。

<div class="loading"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-loading-overlay@1.0.2/loadingoverlay.min.js"></script>
<script>
$(document).ready(function() {
$('.loading').LoadingOverlay("show", {
color: "rgba(52, 152, 219, 0.8)",
image: "",
fade: [200, 200],
custom: $("<div>", {
"class": "custom-loader",
html: "<div></div>"
})
});
<br>
  setTimeout(function() {
$('.loading').LoadingOverlay("hide");
}, 3000);
});
</script>

該代碼案例中，我們在 HTML 中引入了 jQuery 庫和 jQuery Loading Overlay 插件的文件。然后使用 jQuery 的 ready 函數，當頁面加載完成后，我們調用了 LoadingOverlay 插件的 show 方法，通過傳入一些配置參數來設置加載動畫的樣式。這里我們使用 rgba(52, 152, 219, 0.8) 這個顏色作為加載圖案的背景色，并設置 fade 參數來控制加載動畫的淡入淡出效果，并通過自定義的 custom-loader 類來設置加載圖案的樣式。最后，使用 setTimeout 函數，在 3 秒后調用 LoadingOverlay 插件的 hide 方法來隱藏加載動畫。

通過以上三個案例，我們可以看到使用 div 加載動畫可以通過簡單的 CSS3 動畫、JavaScript 顏色變化、jQuery 插件等方式實現。這些加載動畫可以提高用戶體驗，解決長時間等待帶來的焦慮，并為用戶提供一個友好的交互界面。