HTML和CSS都是web開發中必不可少的工具，它們可以幫助我們構建美觀且易于維護的網頁。近年來，網頁中的進度條也變得越來越流行。在這篇文章中，我們將學習如何使用HTML和CSS來創建一個簡單的進度條。

<div id="progress-bar">
<div id="progress"></div>
</div>

在上面的代碼中，我們創建了一個名為'progress-bar'的div元素，這是進度條的容器。這個div還包含了另一個名為'progress'的div元素，這是我們進度條的實際內容。

#progress-bar {
width: 100%;
height: 20px;
background-color: #ddd;
border-radius: 10px;
}
#progress {
width: 0%;
height: 100%;
background-color: #4caf50;
border-radius: 10px;
}

在上面的CSS代碼中，我們首先定義了'progress-bar'元素的樣式。我們將其寬度設置為'100%'，高度設置為'20px'。然后，我們設置了它的背景顏色為灰色，并將其圓角設置為'10px'。

接下來，我們定義了'progress'元素的樣式。我們將其寬度設置為'0%'，使進度條一開始是空的。我們將其高度設置為'100%'，使其與'progress-bar'的高度相等。我們還設置了其背景顏色為綠色，并將其圓角設置為'10px'，使其與'progress-bar'的圓角相匹配。

function updateProgress(progress) {
var progressBar = document.getElementById('progress');
progressBar.style.width = progress + '%';
}

最后，我們需要編寫一些JavaScript代碼來更新進度條。上面的代碼會獲取'id'為'progress'的元素，并將其寬度設置為我們指定的值。在實際項目中，這個值可能是網絡請求的百分比，或是用戶已完成的步驟數量。

到此為止，我們已經成功地創建了一個簡單的HTML和CSS進度條。通過添加一些JavaScript代碼，我們可以輕松地將其嵌入到我們的項目中，并使用它來展示任何類型的進度。