使用选中的单选按钮制作具有3种不同颜色的进度条

<div class="progress-bar">
  <div class="progress" id="progress-1"></div>
  <div class="progress" id="progress-2"></div>
  <div class="progress" id="progress-3"></div>
</div>

.progress-bar {
  width: 300px;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
}

.progress {
  height: 100%;
  border-radius: 10px;
}

#progress-1 {
  background: linear-gradient(to right, #ff0000 0%, #ff0000 33%);
}

#progress-2 {
  background: linear-gradient(to right, #00ff00 0%, #00ff00 33%, #ffff00 33%, #ffff00 66%);
}

#progress-3 {
  background: linear-gradient(to right, #0000ff 0%, #0000ff 66%);
}

// 假设根据某个操作的进度百分比更新进度条宽度
let progress1 = document.getElementById("progress-1");
let progress2 = document.getElementById("progress-2");
let progress3 = document.getElementById("progress-3");

// 更新进度条宽度的函数
function updateProgress(progressElement, percentage) {
  progressElement.style.width = percentage + "%";
}

// 示例更新进度条宽度的调用
updateProgress(progress1, 50);  // 更新第一个进度条为50%的宽度
updateProgress(progress2, 70);  // 更新第二个进度条为70%的宽度
updateProgress(progress3, 90);  // 更新第三个进度条为90%的宽度