CSS柱狀進度條是一種常見的網頁設計元素，可以用于展示進度、完成度等信息。下面是一個簡單的CSS柱狀進度條的示例代碼：

<div class="progress">
<div class="progress-bar" style="width: 50%;"></div>
</div>

上述代碼中，父級元素使用class="progress"，子級元素使用class="progress-bar"，后者的寬度為50%，即進度條的一半。我們可以通過CSS來自定義進度條樣式：

.progress {
height: 20px;
border: 1px solid #ccc;
background-color: #f5f5f5;
border-radius: 4px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background-color: #3e9eff;
transition: width .2s ease-in-out;
}

上述CSS代碼中，我們為進度條的外容器設置了邊框、背景顏色和圓角等樣式，并使用overflow: hidden屬性來隱藏進度條超出容器部分的部分。進度條本身的樣式通過background-color屬性來定義，我們也添加了一個過渡效果（transition）使得進度條寬度改變時更加平滑。

通過這些CSS樣式，我們可以創造出美觀、實用的柱狀進度條，為網頁設計增添一份魅力。