How to make a progress bar

Question

How would one go about making a progress bar in html/css/javascript. I don\'t really want to use Flash. Something along the lines of what can be found here: http://dustincur

Answer 1

You can do it by controlling the width of a div via css. Something roughly along these lines:

<div id="container" style="width:100%; height:50px; border:1px solid black;">
  <div id="progress-bar" style="width:50%;/*change this width */
       background-image:url(someImage.png);
       height:45px;">
  </div>
</div>

That width value can be sent in from php if you so desire.

Answer 2

Infinitive progress bar using pure Javascript

<div id="container" style="width:100%; height:5px; border:1px solid black;">
  <div id="progress-bar" style="width:10%;background-color: green; height:5px;"></div>
</div>

<script>
  var width = 0;
  window.onload = function(e){ 
    setInterval(function () {
        width = width >= 100 ? 0 : width+5;  
        document.getElementById('progress-bar').style.width = width + '%'; }, 200);            
  }
</script>

Example http://fiddle.jshell.net/1kmum4du/

Answer 3

Though one can build a progress bar using setInterval and animating its width

For best performance while animating a progress bar one has to take into account compositor only properties and manage layer count.

Here is an example:

function update(e){
  var left = e.currentTarget.offsetLeft;
  var width = e.currentTarget.offsetWidth
  var position = Math.floor((e.pageX - left) / width * 100) + 1;
  var bar = e.currentTarget.querySelector(".progress-bar__bar");
  bar.style.transform = 'translateX(' + position + '%)';
}

body {
  padding: 2em;
}

.progress-bar {
  cursor: pointer;
  margin-bottom: 10px;
  user-select: none;
}

.progress-bar {
  background-color: #669900;
  border-radius: 4px;
  box-shadow: inset 0 0.5em 0.5em rgba(0, 0, 0, 0.05);
  height: 20px;
  margin: 10px;
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
  width: 100%;
}

.progress-bar__bar {
  background-color: #ececec;
  box-shadow: inset 0 0.5em 0.5em rgba(0, 0, 0, 0.05);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 500ms ease-out;
}

Click on progress bar to update value

<div class="progress-bar" onclick="update(event)">
  <div class="progress-bar__bar"></div>
</div>

Answer 4

I was writing up an answer to a similar question that got deleted, so I'm posting it here in case it's of use to anyone.

The markup can be dropped in anywhere and takes up 50px of vertical real estate even when hidden. (To have it take up no vertical space and instead overlay the top 50px, we can just give the progressContainerDiv absolute positioning (inside any positioned element) and style the display property instead of the visible property.)

The general structure is based on code presented in this Geeks for Geeks article.

const
  progressContainerDiv = document.getElementById("progressContainerDiv");
  progressShownDiv = document.getElementById("progressShownDiv");
let
  progress = 0,
  percentageIncrease = 10;

function animateProgress(){
  progressContainerDiv.style.visibility = "visible";
  const repeater = setInterval(increaseRepeatedly, 100);
  function increaseRepeatedly(){
    if(progress >= 100){
      clearInterval(repeater);
      progressContainerDiv.style.visibility = "hidden";
      progressNumberSpan.innerHTML = "";
      progress = 1;
    }
    else{
      progress = Math.min(100, progress + percentageIncrease);
      progressShownDiv.style.width = progress + "%";
      progressNumberSpan.innerHTML = progress + "%";
    }
  }
}

#progressContainerDiv{
  visibility: hidden;
  height: 40px;
  margin: 5px;
}

#progressBackgroundDiv {
  width: 50%;
  margin-left: 24%;
  background-color: #ffffd;
}
  
#progressShownDiv {
  width: 1%;
  height: 20px;
  background-color: #4CAF50;
}

#progressNumberSpan{
  margin: 0 auto;
}

<div id="progressContainerDiv">
  <div id="progressBackgroundDiv">
    <div id="progressShownDiv"></div>
  </div>
  <div id="progressNumberContainerDiv">
    <span id="progressNumberSpan"></span>
  </div>
</div>
<button type="button" onclick="animateProgress()">Go</button>
<div id="display"></div>

Answer 5

Here is my approach, i've tried to keep it slim:

HTML:

<div class="noload">
    <span class="loadtext" id="loadspan">50%</span>
    <div class="load" id="loaddiv">
    </div>
</div>

CSS:

.load{    
    width: 50%;
    height: 12px;
    background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAPklEQVQYV2M48Gvvf4ZDv/b9Z9j7Fcha827Df4alr1b9Z1j4YsV/BuML3v8ZTC/7/GcwuwokrG4DCceH/v8Bs2Ef1StO/o0AAAAASUVORK5CYII=);  
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.noload{
    width: 100px;    
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAALCAYAAAC+jufvAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwAAADsABataJCQAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAANUlEQVQYVy3EIQ4AQQgEwfn/zwghCMwGh8Tj+8yVKN0d2l00M6i70XsPmdmfu6OIQJmJqooPOu8mqi//WKcAAAAASUVORK5CYII=);     
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #999999;    
    position: relative;
}

.loadtext {
    font-family: Consolas;    
    font-size: 11px;
    color: #000000;
    position: absolute;
    bottom: -1px;
}

Fiddle: here

Answer 6

You can use progressbar.js; Animated progress bar control and tiny chart (sparkline)

Demo and download link

HTML usage;

<div id="my-progressbar"></div>

Javascript usage;

var progressBar;

window.onload = function(){

    progressBar = new ProgressBar("my-progressbar", {'width':'100%', 'height':'3px'});
    progressBar.setPercent(60);

}