CSS 頁面加載進度條動畫

html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
#progress-bar {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 2px;
background-color: #0075FF;
z-index: 99;
transition: width 0.2s ease-in-out;
}
.loading-done #progress-bar {
width: 100%;
}
.loading-done #progress-bar-wrapper {
opacity: 0;
}
#progress-bar-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 2px;
background-color: rgba(0, 0, 0, 0.1);
z-index: 98;
}
#progress-bar:after {
content: "";
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
border-radius: 10px;
border: 2px solid #0075FF;
animation: pulse 2s linear infinite;
}
@keyframes pulse {
0% {
transform: scale(0);
}
25% {
transform: scale(0.75);
}
50% {
transform: scale(1.5);
}
75% {
transform: scale(0.75);
}
100% {
transform: scale(0);
}
}

在現代的網站設計中，優化用戶體驗已經成為了至關重要的一環。對于網頁的加載速度，用戶的耐心僅限于幾秒鐘。因此，一個優秀的 CSS 頁面加載進度條動畫，可以為用戶提供反饋，并保持他們的興趣，直到頁面內容完全展現出來。

下面的 CSS 代碼片段可以幫助您添加進度條動畫。這將在最上面顯示一個進度條，表示頁面的加載進度。一旦頁面加載完畢，進度條將消失，以顯示頁面的完整內容。

首先，創建一個進度條元素，并將其設置為頁面的固定位置。使用移動過渡，使進度條沿著頁面的水平方向增長，并進行動畫處理。

為了使進度條看起來更漂亮，您還可以使用脈沖動畫。這個動畫會在進度條周圍繪制一個擴展的框，框的大小會隨著動畫的進行逐漸縮放。這將使進度條看起來更加生動有趣。

除了進度條元素之外，我們還創建了一個包裝器元素，將其作為進度條的背景。這個元素可以幫助進度條看起來更美觀，同時也可以防止進度條被其他元素覆蓋。

總體而言，這是一個非常簡單的 CSS 頁面加載進度條動畫。它不僅可以讓您的頁面更具吸引力，而且可以更好地向用戶傳達頁面加載的狀態。