Question 222500 in Html Question posted in
Some basic documentation can be found here.

Html – Changing Bootstrap 'loading' style progress bar to dot style progress bar

I am currently using a Bootstrap "loading" style progress bar to indicate the progress of a survey. The progress bar code looks like this:

html

<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

However, I would like to change the style of the progress bar to a dot style, where each step of the survey is represented by a dot. For example:

enter image description here

I have searched through Bootstrap documentation and tried different CSS styles, but I couldn’t find a straightforward way to achieve the dot style. Can someone please guide me on how to modify the progress bar to display as dots rather than a solid bar? Any help or code examples would be greatly appreciated. Thank you!

Tags:

2

Answers


  1. 0

    To create a dot style progress bar, you can make use of Bootstrap’s flexbox and create a series of dots within a container. Each dot represents a step in the survey, and you can update the class of the dots dynamically to show the progress.
    Try this code.

    let currentStep = 0; // We start from 0 because it's the first step

function updateProgressDots() {
  const progressDots = document.querySelectorAll('.progress-dot');
  for (let i = 0; i < progressDots.length; i++) {
    if (i < currentStep) {
      progressDots[i].classList.add('active');
    } else {
      progressDots[i].classList.remove('active');
    }
  }
}

function moveToNextStep() {
  currentStep++;
  // Ensure currentStep doesn't exceed the number of progress dots
  const progressDots = document.querySelectorAll('.progress-dot');
  currentStep = Math.min(currentStep, progressDots.length);
  updateProgressDots();
}

// Add event listener to the "Next" button
const nextButton = document.getElementById('nextButton');
nextButton.addEventListener('click', moveToNextStep);
    .progress-dot-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 200px; /* Adjust the width as per your preference */
  height: 20px; /* Adjust the height as per your preference */
  background-color: #f1f1f1; /* Adjust the background color if needed */
  border-radius: 10px; /* To make the container rounded */
}

.progress-dot {
  width: 10px; /* Adjust the dot size as per your preference */
  height: 10px; /* Adjust the dot size as per your preference */
  border-radius: 50%;
  background-color: #007bff; /* Adjust the dot color as per your preference */
}

/* Add a class to highlight the progress */
.progress-dot.active {
  background-color: #00ff00; /* Change the color to indicate active progress */
}
      <div class="container mt-5">
    <div class="progress-dot-container">
      <div class="progress-dot"></div>
      <div class="progress-dot"></div>
      <div class="progress-dot"></div>
      <!-- Add more progress dots for each step in your survey -->
    </div>

    <button id="nextButton"">Next</button>
  </div>
    Login or Signup to reply.
  2. 0

    I created it from scratch. If you have any question feel free to ask.

    const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const progress = document.querySelector('.progress');

let counter = 0;

next.addEventListener('click', function(){
    if(counter <= 35){
        progress.innerHTML += "⚫";
        counter++;
    }
})

previous.addEventListener('click', function(){
    if(counter > 0){
        var textNode = progress.firstChild;
        textNode.data = textNode.data.slice(0, -1);
    }
})
    .progress{
    height: 25px;
    border: 1px solid blue;
    width: 100%;
    margin-bottom: 10px;
}
    <div class="progress"></div>
<button class="previous">Previous</button>
<button class="next">Next</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search