進(jìn)度條效果是網(wǎng)頁設(shè)計(jì)中常用的一種效果，可以展示某個(gè)任務(wù)的完成進(jìn)度。下面介紹一個(gè)使用CSS代碼實(shí)現(xiàn)進(jìn)度條效果的方法。

.progress {
width: 100%;
height: 20px;
background-color: #f2f2f2;
border-radius: 10px;
overflow: hidden;
}
.progress-bar {
width: 0%;
height: 100%;
background-color: #2ecc71;
}
.progress-text {
font-size: 14px;
text-align: center;
padding: 2px;
color: #fff;
}

以上是CSS代碼的核心部分，其中包含三個(gè)類名分別是progress、progress-bar和progress-text。

首先，給進(jìn)度條容器（progress）設(shè)置寬度、高度、背景顏色和邊框圓角。

然后，進(jìn)度條（progress-bar）寬度默認(rèn)為0，高度為100%，背景顏色為綠色。通過JavaScript動態(tài)修改它的寬度實(shí)現(xiàn)進(jìn)度條效果。

最后，進(jìn)度條上的文字（progress-text）設(shè)置字體大小、居中對齊、內(nèi)部填充和字體顏色。

使用方法：

在HTML頁面中添加一個(gè)div元素，并設(shè)置class屬性為progress。在JavaScript中獲取該元素，并通過修改進(jìn)度條寬度的方式實(shí)現(xiàn)進(jìn)度條效果。

<div class="progress">
<div class="progress-bar"></div>
<div class="progress-text"></div>
</div>