Jquery進度條豎向是一種非常常見的網(wǎng)頁元素，它常用于表現(xiàn)進度的狀態(tài)，比如文件上傳、下載等。下面我們來學習如何使用Jquery實現(xiàn)一個豎向進度條。

.progress-wrapper {
width: 60px;
height: 100px;
position: relative;
margin-top: 50px;
}
.progress-bar {
width: 100%;
height: 100%;
border-radius: 5px;
background-color: #eee;
}
.progress-value {
content: "";
position: absolute;
height: 0%;
width: 100%;
bottom: 0;
left: 0;
background-color: #0078FF;
border-radius: 5px;
transition: height 0.5s ease;
}

代碼解釋：

.progress-wrapper: 進度條的容器，設(shè)置容器的寬度和高度

.progress-bar: 進度條本身，設(shè)置進度條的樣式

.progress-value: 進度條的值，即進度條的高度，設(shè)置進度條高度變化時的過渡效果

下面是Jquery代碼：

$(document).ready(function() {
var progressValue = 30;
$(".progress-value").css("height", progressValue + "%");
});

代碼解釋：

首先在文檔準備好之后，定義了一個變量progressValue，值為30。

然后通過Jquery選中了進度條的值，也就是進度條的高度，設(shè)置它的高度為progressValue加上百分號，即30%。

使用時只需修改progressValue的值即可改變進度條的高度，從而達到不同的進度狀態(tài)。