Revision history [back]

Here is an example of how to create a progress bar in HTML with four options that allow the user to input percentages:

1. First, create the HTML structure for the progress bar:

<div class="progress">
  <div class="bar"></div>
</div>

1. Add a form with four input fields, each with a label and a number input type:

<form>
  <label for="progress1">Option 1:</label>
  <input type="number" id="progress1" min="0" max="100">

  <label for="progress2">Option 2:</label>
  <input type="number" id="progress2" min="0" max="100">

  <label for="progress3">Option 3:</label>
  <input type="number" id="progress3" min="0" max="100">

  <label for="progress4">Option 4:</label>
  <input type="number" id="progress4" min="0" max="100">

  <button type="submit">Update Progress</button>
</form>

1. Use CSS to style the progress bar and the bar itself:

.progress {
  background-color: #ddd;
  height: 20px;
  margin-bottom: 20px;
  position: relative;
  width: 100%;
}

.bar {
  background-color: #4CAF50;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: width 0.5s ease-in-out;
  width: 0;
}

1. Add JavaScript to update the width of the bar based on the input percentages when the form is submitted:

const form = document.querySelector('form');
const bar = document.querySelector('.bar');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // prevent form from submitting

  const progress1 = document.getElementById('progress1').value;
  const progress2 = document.getElementById('progress2').value;
  const progress3 = document.getElementById('progress3').value;
  const progress4 = document.getElementById('progress4').value;

  const totalProgress = Number(progress1) + Number(progress2) + Number(progress3) + Number(progress4);
  const averageProgress = totalProgress / 4;

  bar.style.width = `${averageProgress}%`;
});

This JavaScript code gets the values of the input fields when the form is submitted, calculates the average percentage of all the inputs, and updates the width of the bar accordingly.

Note that this is just one way to create a progress bar in HTML with input fields. There are many other methods and variations that you can use depending on your specific needs.