CSS中的滾動進度條效果是許多網站和應用程序中常見的視覺效果之一。它可以幫助用戶追蹤頁面的滾動進度，提高用戶體驗。

.scroll-progress{
position: fixed;
top: 0;
left: 0;
height: 4px;
width: 0%;
background-color: #4CAF50;
z-index: 9999;
transition: width 0.3s ease-in-out;
}

上述代碼是一個簡單的CSS樣式，它用于創建一個滾動進度條。該樣式使用了position: fixed屬性，使其可以固定在頁面頂部，height: 4px屬性定義了進度條的高度，background-color: #4CAF50則是指定了進度條的顏色。

在使用此樣式之前，需要先通過JavaScript獲取頁面的總高度和當前滾動位置，然后計算百分比并將其應用于進度條的寬度：

window.addEventListener('scroll', function() {
let scrollTop = window.pageYOffset;
let docHeight = document.body.offsetHeight;
let winHeight = window.innerHeight;
let scrollPercent = scrollTop / (docHeight - winHeight) * 100;
let progressWidth = scrollPercent.toFixed(2) + "%";
document.querySelector('.scroll-progress').style.width = progressWidth;
});

上述JavaScript代碼創建了一個滾動事件監聽器，它會在用戶滾動頁面時觸發并計算滾動百分比。該代碼通過querySelector獲取滾動進度條元素，將計算得到的百分比應用到進度條的寬度中。

這是使用CSS和JavaScript創建滾動進度條效果的基本代碼。通過對CSS樣式進行修改，我們可以根據喜好和需求對進度條的顏色，高度等屬性進行調整。除此之外，還可以在進度條上加入動畫效果和其他樣式，以增強整個滾動體驗。