CSS進度條是Web頁面中常見的一個特效，能夠讓用戶清晰地看到任務的進展情況。在本文中，我們將為大家介紹如何使用CSS模擬一個簡單的進度條。

/* 進度條外框 */
.progress-bar {
width: 100%;
height: 20px;
border: 1px solid #ccc;
position: relative;
}
/* 進度條背景 */
.progress-bar .bar {
width: 0%;
height: 100%;
background-color: #ccc;
}
/* 進度條前景 */
.progress-bar .bar.active {
background-color: #3498db;
}
/* 進度條文本 */
.progress-bar span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

首先我們需要一個進度條的外框。這個外框的大小由我們自行決定，這里我們設置它的高度為20px，邊框為1像素的灰色實線。進度條的寬度由子元素決定，這樣設置可以讓我們方便地控制進度條的長度。

進度條的背景色是gray，我們把進度條的前景色設為blue。這里我們用一個名為“active”的類來控制進度條的寬度。例如，如果我們需要讓進度條的完成度達到50%，那么我們只要在進度條外框中添加下面這一行代碼：

最后，我們給進度條添加了一個居中的文本。這個文本的內(nèi)容可以是進度條的完成度百分比，也可以是任務的名稱等等。我們使用了CSS的“transform”屬性來實現(xiàn)文本的居中，它兼容大多數(shù)現(xiàn)代瀏覽器。