介紹

載入器（或載入旋轉器）透過在載入期間提供視覺回饋來增強使用者體驗。在本教程中，我們將使用 HTML 和 CSS 創建一個時尚且現代的載入器。讓我們開始吧！

什麼是裝載機？

載入器是動畫元素，指示正在處理內容。它可以向用戶保證應用程式正在運行，從而減少加載期間出現問題的可能性。

為什麼要使用裝載機？

• 改善使用者體驗：讓使用者在等待時隨時了解狀況。
• 增強美觀：精心設計的載入器可以讓您的網站看起來更專業。
• 防止用戶放棄：透過提供視覺回饋，用戶在等待時不太可能離開。

第 1 步：設定 HTML 結構
我們將從載入程式的基本 HTML 結構開始。以下程式碼為裝載機建立一個具有十二個欄位的容器。

第 2 步：使用 CSS 設計樣式
接下來，我們將新增 CSS 來設定載入程式的樣式。這是創建帶有動畫條的圓形載入器的程式碼。

`.loader {
位置：相對；
寬度：54px；
高度：54px；
邊框半徑：10px；
}

.loader div {
寬度：8%；
高度：24%；
背景: rgb(128, 128, 128);
位置：絕對；
左：50%；
上：30%；
不透明度：0；
邊框半徑：50px；
盒子陰影：0 0 3px rgba(0,0,0,0.2);
動畫：fade458 1s線性無限；
}

@keyframes fade458 {
從 {
不透明度：1；
}

到 {
不透明度：0.25；
}
}`

第3步：新增動畫
我們將對每個欄位套用旋轉和動畫延遲以建立動態載入效果。

`.loader .bar1 {
變換: 旋轉(0deg) 平移(0, -130%);
動畫延遲：0s;
}

.loader .bar2 {
變換: 旋轉(30deg) 平移(0, -130%);
動畫延遲：-1.1s；
}

.loader .bar3 {
變換: 旋轉(60deg) 平移(0, -130%);
動畫延遲：-1s;
}

.loader .bar4 {
變換: 旋轉(90deg) 平移(0, -130%);
動畫延遲：-0.9s；
}

.loader .bar5 {
變換: 旋轉(120deg) 平移(0, -130%);
動畫延遲：-0.8s；
}

.loader .bar6 {
變換: 旋轉(150deg) 平移(0, -130%);
動畫延遲：-0.7s；
}

.loader .bar7 {
變換: 旋轉(180deg) 平移(0, -130%);
動畫延遲：-0.6s；
}

.loader .bar8 {
變換: 旋轉(210deg) 平移(0, -130%);
動畫延遲：-0.5s；
}

.loader .bar9 {
變換: 旋轉(240deg) 平移(0, -130%);
動畫延遲：-0.4s；
}

.loader .bar10 {
變換: 旋轉(270deg) 平移(0, -130%);
動畫延遲：-0.3s；
}

.loader .bar11 {
變換: 旋轉(300deg) 平移(0, -130%);
動畫延遲：-0.2s；
}

.loader .bar12 {
變換: 旋轉(330deg) 平移(0, -130%);
動畫延遲：-0.1s;
}`

第 4 步：將載入程式整合到您的網站中
若要在 Web 專案中使用載入器，請確保在檔案中包含 HTML 和 CSS。將載入程式的 HTML 標記放在您想要的位置，載入程式將在載入過程中出現。

結論

建立載入程式可以顯著增強網站的使用者體驗。使用簡單的 HTML 和 CSS，您可以建立一個具有視覺吸引力且功能齊全的載入器。嘗試適合您網站設計的顏色和尺寸！