在網站設計中，進度條常常被用來表示頁面的加載情況。而在一些特定的場景下，高低進度條則更為適合。在這篇文章中，我們將探討如何使用 CSS 來創建這樣的進度條。

首先，讓我們來看一下高低進度條的樣式。

.progress-bar{
width: 100%;
height: 8px;
position: relative;
overflow: hidden;
background: #f2f2f2;
}
.progress-bar__bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #1e88e5;
transition: transform .5s ease;
}
.progress-bar__front{
width: 100%;
height: 50%;
position: absolute;
bottom: 0;
left: 0;
background: #1e88e5;
transform: translateY(100%);
}

這段 CSS 代碼定義了三個不同的類：.progress-bar、.progress-bar__bg 和 .progress-bar__front。它們分別代表了進度條的背景、進度和前景。

進度條的背景使用了 overflow: hidden 屬性，可以使得進度條的后面部分被遮蓋住，從而留出前景部分的空間。

進度條的進度使用了 position: absolute 屬性，可以讓其脫離文檔流，并且相對于包含元素進行定位。這個元素的高度被設置為 100%，這樣就可以填滿整個進度條的寬度。而 transform 屬性則可以用來實現進度的動畫效果。

接下來，讓我們來看一下前景元素。前景元素的高度是整個進度條高度的一半，而 translateY 函數可以讓元素向下平移它們的高度。

最后，將這三個元素組合起來，就可以得到一個漂亮的高低進度條了。