CSS 進度條可以用來展示任務的進度或者加載狀態。除了常見的水平進度條，CSS 也提供了豎直方向的進度條，下面我們來看看如何實現。

/*CSS 樣式*/
.progress-bar {
display: flex;
flex-direction: column-reverse;
background-color: #eee;
border-radius: 10px;
height: 200px;
width: 50px;
margin: 20px;
}
.progress-bar-fill {
background-color: #008000;
border-radius: 10px;
height: 0%;
transition: height 0.5s ease;
}

我們首先需要給進度條的容器設定一個高度和寬度，以及一個背景顏色和圓角邊緣效果。我們使用 display 屬性將容器的排列方向設置成豎直方向。接下來，我們需要在容器中添加一個子元素，用來模擬進度條的填充效果。

我們為填充元素設置一個背景色和圓角邊緣效果，高度設置為 0，這樣它會完全填充到容器中。然后我們使用 transition 屬性來實現進度條填充過程的平滑動畫效果，這里我們設置 0.5 秒的動畫時長和 ease 曲線，讓進度條看起來更加自然。

<div class="progress-bar">
<div class="progress-bar-fill" style="height: 70%;"></div>
</div>

最后，我們只需要在 HTML 中添加一個進度條容器和一個填充元素，給填充元素設置一個指定的高度值，進度條就可以按照我們預期的進度展示了。我們可以使用 JavaScript 動態的改變填充元素的高度值，從而實現進度條的動態展示效果。

CSS 進度條有很多應用場景，如頁面元素的加載進度、文件上傳進度等，使用 CSS 進度條可以增強用戶的體驗感知，讓用戶更好的了解任務的進度和狀態。