CSS3加載條是現代網頁設計中經常使用的一種元素。它可以在頁面加載過程中給用戶一個指示，讓他們知道頁面正在加載中，這有助于提高用戶體驗。

.loading-bar {
position: fixed;
top: 0;
left: 0;
height: 4px;
background-color: #f00;
z-index: 9999;
transition: width 0.2s ease-out;
}

加載條的HTML結構很簡單。我們只需要創建一個div，然后添加類名“loading-bar”即可。在CSS代碼中，我們設置加載條的位置，高度和背景顏色。我們還使用了CSS3的過渡效果，讓加載條動態地增加寬度，這樣用戶就可以看到一個漂亮的動畫效果。

var progressBar = document.querySelector('.loading-bar');
window.addEventListener('load', function() {
progressBar.style.width = '100%';
});

在JavaScript代碼中，我們使用window對象的load事件來觸發加載條的動畫。當所有資源加載完成后，我們將加載條的寬度設置為100%，這樣它就完全填滿了瀏覽器窗口。這是一種簡單而有效的方法來實現加載條，讓用戶在等待頁面加載時感到更舒適。