CSS進度條可以用于展示頁面加載進度、表單提交進度、操作進度等等。本文將介紹如何用CSS實現豎向的進度條。

/* 進度條容器樣式 */
.progress-wrapper {
width: 20px;
height: 200px;
background-color: #eee;
border-radius: 10px;
overflow: hidden;
}
/* 進度條樣式 */
.progress-bar {
width: 100%;
background-color: #00ccff;
transition: height 0.5s ease-out;
}
/* 進度條動態效果 */
.progress-bar[data-progress='0'] {
height: 0;
}
.progress-bar[data-progress='25'] {
height: 50px;
}
.progress-bar[data-progress='50'] {
height: 100px;
}
.progress-bar[data-progress='75'] {
height: 150px;
}
.progress-bar[data-progress='100'] {
height: 200px;
}

首先，我們需要一個容器來包裹進度條。進度條容器需要設置寬度和高度，并給一個背景色和圓角邊框。為了保證進度條能夠超出容器，需要設置容器的overflow為hidden。

接下來，我們需要一個進度條元素，并設置寬度為100%，高度為0。在樣式中設置data-progress屬性來控制進度條的高度。通過CSS的transition屬性可以實現進度條高度的平滑過渡效果。

最后，在動態效果的部分，我們通過設置不同的data-progress屬性來控制進度條的高度。比如當data-progress的值為0時，進度條的高度為0；當data-progress的值為25時，進度條的高度為50px；以此類推。

在HTML中，我們可以這樣使用：

<div class="progress-wrapper">
<div class="progress-bar" data-progress="75"></div>
</div>

通過設置進度條的data-progress屬性來控制進度條的高度，可以方便地實現不同的進度效果。