html 步骤进度条代码

pre {
.progress-bar {
    width: 100%;
    height: 20px;
    background-color: #eee;
    position: relative;
}
.progress-bar:before {
    content: "";
    width: 0%;
    height: 20px;
    background-color: green;
    position: absolute;
    top: 0;
    left: 0;
}
.progress-bar:after {
    content: "";
    width: 100%;
    height: 20px;
    background-color: #ccc;
    position: absolute;
    top: 0;
    left: 0;
}
}
    

var progress = 0;
    var progressBar = document.querySelector(".progress-bar");
// Update progress on button clickdocument.querySelector("button").addEventListener("click", function() {
    progress += 25;
    progressBar.style.setProperty("--progress", progress + "%");
}
    );
// ProgressBar设置进度// Reset progress on refreshwindow.addEventListener("load", function() {
    progress = 0;
    progressBar.style.setProperty("--progress", progress + "%");
}
    );
    // ProgressBar设置进度条的总长度和完成度的比例

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！