CSS滚动进度条效果是一种小而实用的网页UI设计元素，它可以让用户轻松地了解页面的加载进度。下面我们将介绍CSS滚动进度条效果的设计方法和如何实现它。

/* 滚动条容器的样式 */
.scroll-container {
position: relative;
height: 10px;
background-color: #ddd;
}
/* 滚动条的样式 */
.scroll-bar {
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: #1abc9c;
transition: width .3s ease;
}
/* 滚动内容的样式 */
.scroll-content {
height: 500px;
overflow-y: scroll;
}
/* 滚动事件监听 */
document.querySelector('.scroll-content').addEventListener('scroll', function(e) {
let scrollTop = e.target.scrollTop;
let scrollHeight = e.target.scrollHeight;
let clientHeight = e.target.clientHeight;
let progress = (scrollTop / (scrollHeight - clientHeight)) * 100;
document.querySelector('.scroll-bar').style.width = progress + '%';
});

以上是一个简单的CSS滚动进度条的示例代码。其中，我们通过监听滚动内容的滚动事件，计算出当前滚动的进度，然后将其设置为滚动条的宽度，从而实现了滚动进度条的效果。通过修改滚动条的样式，可以定制出不同风格的滚动条，从而适配不同的UI设计需求。