要實現進度條的動態加載效果,可以使用Bootstrap的進度條組件,并結合JavaScript來更新進度條的值。
首先,在HTML中添加一個進度條的容器,并設置id屬性用于后續的JavaScript操作:
<div id="progress" class="progress">
<div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
然后,在JavaScript中獲取進度條的元素,并使用setInterval
函數來更新進度條的值:
var progressBar = document.querySelector("#progress .progress-bar");
var progress = 0;
var interval = setInterval(function() {
progress += 10;
progressBar.style.width = progress + "%";
progressBar.setAttribute("aria-valuenow", progress);
if (progress >= 100) {
clearInterval(interval);
}
}, 1000);
在上面的代碼中,我們使用setInterval
函數每隔1秒更新一次進度條的值,每次增加10%,直到達到100%為止。在更新進度條的同時,我們也更新了aria-valuenow
屬性和進度條的寬度樣式,以保證進度條的正確顯示。
最后,你可以根據自己的需求來調整更新的速度和增加的百分比。