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>