How to animate a simple progress bar using JavaScript?

Question

Here is a loading bar script in CSS... I want to animate it using a Javascript function... But I have no idea where to start?

Here is the code:

I have tried this CSS code to animate it but using CSS:

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-family: sans-serif;
  cursor: default;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

body {
  background: #ffff;
}

#pb {
  background: #transparent;
  width: 250px;
  height: 38px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -19px;
  margin-left: -125px;
  border-radius: 8px;
  padding: 3px;
  overflow: hidden;
  text-align: center;
}

#progress {
  height: 38px;
  width: 250px;
  background-color: #0080FF;
  border-radius: 6px;
  background: #6db3f2;
  background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6db3f2), color-stop(50%, #54a3ee), color-stop(51%, #3690f0), color-stop(100%, #1e69de));
  /* Chrome,Safari4+ */
}

#done:active {
  -webkit-box-shadow: inset 0px 0px 18px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0px 0px 18px rgba(0, 0, 0, 0.4);
  border-radius: 6px;
}

#done {
  text-align: center;
  line-height: 38px;
  font-size: 14px;
  font-weight: bold;
  color: #EEE;
  height: 38px;
  width: 250px;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

#pb:hover #progress {
  transition: all 10.3s;
  width: 10px;
}

<div id="pb">
  <div id="progress">
    <div id="done">Loading...</div>
  </div>
  Done!
</div>

But I want a Javascript function to animate the progress bar in 10 seconds.

Any help would be greatly appreciated

Answer 1

You can trigger the animation of this function with javascript. You can even set its transition duration!

document.querySelector("button").addEventListener("click", () => {
  document.querySelector(".progress .bar").style.transitionDuration = "10s";
  document.querySelector(".progress").className += " complete";
});

.progress {
  width: 50%;
  height: 2em;
  border: 1px solid black;
}

.bar {
  width: 100%;
  background-color: deepskyblue;
  color: white;
  text-align: center;
  line-height: 2em;
  
  transition-property: width;
  transition-timing-function: linear;
}

.progress.complete .bar {
  width: 0%;
}

button {
  margin-top: 1em;
}

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

<button>
  Start
</button>

Answer 2

You can simply do this:

let elem = document.getElementById("done");   
let width = 1;
let id = setInterval(frame, 100);
function frame() {
    if (width >= 100) {
        clearInterval(id);
} else {
    width++; 
    elem.style.width = width + '%'; 
}

Also there is ProgressBar.js. You can check out this site for more modern and good looking progress bars. It allows you to look the codes in JSFiddle and it is easy to use.