Run Progress Bar after Click Button

Question

How to make a button for progress bar?

I have Javascript Like this

function move() {
        var elem = document.getElementById("myBar");
        var width = 0;
        var id = setInterval(frame,55);
        function frame() {
            if (width >= 100) {

                var confirmButton = document.getElementById("confirm");
                confirmButton.className = "btn btn-success";
                confirmButton.innerHTML = "<i class='fas fa-coins'></i> Got Rewards!";
                confirmButton.removeAttribute('disabled');
                confirmButton.setAttribute('href','https://indaesa.com');
                clearInterval(id);

            } else {
                width++;
                elem.style.width = width + '%';
                elem.innerHTML = width * 1  + '%';
            }
        }
    }
    window.onload = move;

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}

.progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.675rem;
  background-color: #e9ecef;
  border-radius: 4px;
}

.progress-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  text-align: center;
  background-color: #0297c6;
  -webkit-transition: width 0.6s ease;
  transition: width 0.6s ease;
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  -webkit-animation: progress-bar-stripes 1s linear infinite;
          animation: progress-bar-stripes 1s linear infinite;
}

        <div class="col-sm-4">
                <div class="showads-progress">
                  <div class="progress">
                    <div aria-valuemax="100" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" id="myBar"></div>
                  </div>
                </div>
            </div>
             <a type="button" id="confirm" class="btn btn-white" disabled>
                <strong>Waiting Time</strong>
            </a>

So I will make a button click, I'm stuck in here.
I want to add a button click and then run a progress-bar, how do I start with the javascript code I have? I tried several ways to keep the progress bar running and the button doesn't work, how do I get the button to run the progress bar.

Answer 1

You can bind an onclick event to a button and run the progress bar. Please check the below example.

function move() {
  var elem = document.getElementById("myBar");
  var width = 0;
  var id = setInterval(frame, 55);

  function frame() {
    if (width >= 100) {

      var confirmButton = document.getElementById("confirm");
      confirmButton.className = "btn btn-success";
      confirmButton.innerHTML = "<i class='fas fa-coins'></i> Got Rewards!";
      confirmButton.removeAttribute('disabled');
      confirmButton.setAttribute('href', 'https://indaesa.com');
      clearInterval(id);

    } else {
      width++;
      elem.style.width = width + '%';
      elem.innerHTML = width * 1 + '%';
    }
  }
}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 1rem 0;
  }
  to {
    background-position: 0 0;
  }
}

.progress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 1rem;
  overflow: hidden;
  font-size: 0.675rem;
  background-color: #e9ecef;
  border-radius: 4px;
}

.progress-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  background-color: #0297c6;
  -webkit-transition: width 0.6s ease;
  transition: width 0.6s ease;
}

.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  -webkit-animation: progress-bar-stripes 1s linear infinite;
  animation: progress-bar-stripes 1s linear infinite;
}

<div class="col-sm-4">
  <div class="showads-progress">
    <div class="progress">
      <div aria-valuemax="100" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" id="myBar"></div>
    </div>
  </div>
</div>


<button type="button" onclick="move()">Make Progress Move</button>