基于百分比设置div背景颜色(如进度条)

<div id="progress" style="width: 100%; background-color: lightgray;">
    <div id="progress-bar" style="width: 0%; background-color: blue;"></div>
</div>

#progress {
    height: 20px;  /* 进度条高度 */
    border-radius: 5px;  /* 进度条圆角 */
    overflow: hidden;  /* 隐藏超出进度条的部分 */
}

#progress-bar {
    height: 100%;
    transition: width 0.5s;  /* 进度条动画过渡效果 */
}

function setProgressBarPercentage(percentage) {
    var progressBar = document.getElementById("progress-bar");
    progressBar.style.width = percentage + "%";
}

setProgressBarPercentage(75);  // 设置进度条百分比为75%