JavaScript 加載動畫的作用是在頁面加載過程中給用戶一個視覺體驗，告訴用戶網頁正在加載并且很快就要加載完成了。JavaScript 加載動畫通常會顯示在頁面的中間位置，或者局部加載的時候會顯示在該區域的中間位置，如下：

.loader {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
display: flex;
justify-content: center;
align-items: center;
}
.loader img {
width: 150px;
height: 150px;
}

為了展示如何加載動畫的外觀，下面將給出兩種不同的加載動畫，一種是應用著名的loading.io網站的資源；另一種則是使用 CSS 和 JS 實現的簡單加載動畫。

加載動畫1

加載動畫2

以上兩個加載動畫的區別在于外觀樣式不同。第一個加載動畫使用的是引用自loading.io網站的資源，它以相同大小的正方形方塊組成一個大方塊，并將其旋轉，形成旋轉的正方形方塊。第二個加載動畫使用的是 CSS 和 JS 編寫的樣式，它以不同大小的同心圓組成一個大圓，并將其旋轉，形成旋轉的圓圈。

無論外觀樣式如何，JavaScript 加載動畫在實現時都需要注意以下幾點：

• 樣式需要設計為固定定位，這樣才能保證它在整個頁面的中央位置
• 樣式需要設置 z-index 屬性，這樣才能保證它不會被其他元素覆蓋
• 樣式大小需要設置為與實際占用空間一致，以免影響頁面排版
• 需要在頁面加載完成后使用 JavaScript 將其隱藏

需要注意的是，如果頁面的加載速度很快，那么加載動畫就會瞬間消失，這種情況下會讓用戶感到加載動畫顯得多余。因此，加載動畫的設計需要在考慮加載動畫的可見性的同時，考慮在快速加載頁面時的隱藏方式。

除了以上實現方式，還有一種通過使用第三方庫實現的加載動畫。例如，使用GreenSock Animation Platform(GSAP) 這個幫助開發者輕松創建高效、直觀和流暢動畫的開源 JavaScript 動畫庫。GSAP 可以實現各種逼真、平滑的加載動畫效果，它包括許多 TypeScript 代碼片段，免費向開發人員提供基礎版、促銷版和較高級的訂閱版。

JavaScript 加載動畫的表現形式多樣，但其設計目的是為了優化頁面加載體驗，提高用戶體驗。通過使用不同的樣式和庫，開發人員可以根據項目需要選擇不同的設計方式。但無論采取何種設計方式，不能影響頁面的排版、占用過多資源，也不能太過顯眼，這樣才是一種優美的設計。