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 进度条可以增强用户的体验感知，让用户更好的了解任务的进度和状态。