请求基于CSS实现分阶段变色的多色进度条代码

Hey there! Let's build that multi-color progress bar you're asking for. Here's a straightforward implementation using HTML, CSS, and vanilla JavaScript that fits your exact requirements:

Step 1: HTML Structure #

We'll start with a simple container for the progress bar, a display for the current progress value, and a slider to easily test different values:

<div class="progress-container">
  <div class="progress-bar" id="progressBar"></div>
  <div class="progress-value" id="progressValue">0%</div>
</div>
<!-- Slider to adjust progress in real time -->
<input type="range" min="0" max="100" value="0" id="progressSlider" oninput="updateProgress(this.value)">

Step 2: CSS Styling #

This sets up a clean, rounded progress bar with smooth transitions for width and color changes:

.progress-container {
  width: 350px;
  height: 24px;
  border-radius: 12px;
  background-color: #e0e0e0;
  margin: 25px 0;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 12px;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.progress-value {
  font-family: Arial, sans-serif;
  font-size: 15px;
  color: #333;
}

input[type="range"] {
  width: 350px;
}

Step 3: JavaScript Logic #

This function handles updating the progress bar's width and color based on the input value:

function updateProgress(value) {
  const progressBar = document.getElementById('progressBar');
  const progressValue = document.getElementById('progressValue');
  
  // Update the displayed percentage
  progressValue.textContent = `${value}%`;
  
  // Adjust the bar's width to match the progress
  progressBar.style.width = `${value}%`;
  
  // Assign color based on your requirements
  if (value < 50) {
    progressBar.style.backgroundColor = '#ff4444'; // Bright red
  } else if (value >= 50 && value < 90) {
    progressBar.style.backgroundColor = '#00C851'; // Vibrant green
  } else if (value >= 90 && value <= 100) {
    progressBar.style.backgroundColor = '#33b5e5'; // Soft blue
  }
}

// Initialize with a default value
updateProgress(0);

How It Works #

• Drag the slider to adjust progress—this triggers the updateProgress function instantly.
• The CSS ensures smooth transitions when the bar's width or color changes, making the experience feel polished.
• The color logic follows your exact rules:
  • Red for progress < 50%
  • Green for progress between 50% and 89%
  • Blue for progress between 90% and 100%

You can tweak colors (use hex codes, RGB, or named colors), adjust the bar's size, or modify the transition speed by editing the CSS values to match your design needs.

内容的提问来源于stack exchange，提问作者Rishabh shukla