網頁加載速度一直是用戶最關心的問題，而為了方便用戶了解網頁的加載狀態，我們通常會在頁面中加入進度條。下面是一段簡單的用HTML實現網頁加載進度條的代碼：
<!DOCTYPE html>
<html>
<head>
<title>網頁加載進度條</title>
<style>
#progress-bar {
width: 100%;
height: 5px;
background-color: #eee;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
#progress {
width: 0;
height: 100%;
background-color: #0066cc;
transition: width 0.5s ease-in-out;
}
</style>
</head>
<body>
<div id="progress-bar">
<div id="progress"></div>
</div>
<script>
// 頁面加載進度條
var progressBar = document.getElementById('progress');
var percent = 0;
var timerId = setInterval(function() {
percent++;
progressBar.style.width = percent + '%';
if (percent == 100) {
clearInterval(timerId);
}
}, 50);
</script>
</body>
</html>在頁面中，我們先定義了一個 #progress-bar 的 div 元素作為進度條外層容器，然后在其內部定義了一個 #progress 的 div 元素作為進度條。在 CSS 樣式中我們定義了 #progress-bar 的基礎樣式和進度條 #progress 的寬度為 0%，高度為 100% 的基本樣式。
在 body 元素中，我們使用了一個 script 標簽來定義一個定時器 setinterval 函數，用來模擬加載進度條的變化。每隔 50 毫秒，進度條的寬度增加為 1%，直到加載完畢或進度條達到 100% 時 clearInterval。
通過這段簡單的 HTML 代碼，我們可以輕松地為網頁添加一款漂亮的加載進度條，可以提高用戶的體驗感，為網頁加載速度提供一定的參考。如果需要更多的定制化效果，可以進一步調整 CSS 樣式：
#progress-bar {
width: 100%;
height: 5px;
background-color: #eee;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
/* 進度條樣式調整 */
border-radius: 10px;
}
#progress {
width: 0;
height: 100%;
background-color: #0066cc;
transition: width 0.5s ease-in-out;
/* 進度條樣式調整 */
border-radius: 5px;
}