CODEWITHSUNDEEP
javascripthtml
Brandon
Brandon

Reputation: 55

How to make a progress bar using HTML and JavaScript

I am trying to make a progress bar just for looks, but it doesn't work. Here is the code:

<!DOCTYPE html>
<html>
  <head>
    <title>Page 1</title>
      <style>
        #loader {background-color:#ffffff;position:absolute;top:0px;left:0px;width:100%;height:100%;}
        #loadertitle {position:relative;top:20px;left:39%;font-size:120px;}
        #loadingdiv {position:relative;top:47%;left:43%;width:180px;height:55px;}
        #loadingbar {position:absolute;top:50%;left:0px;width:100%;height:8px;background-color:#794c79;}
        #loadingbarprogress {position:relative;top:0px;left:0px;height:100%;width:0%;background-color:#400040;}
        #loadingtext {position:relative;top:13%;left:46%;}
      </style>
      <script>
        var progress = document.getElementById('loadingbarprogress');
        loadingbar(progress, 500);
        function doMove() {
          progress.style.width = parseInt(progress.style.width) + 1 +'%';
          if (progress.style.width = '100%') {
            progress = null;
          }
          setTimeout(doMove,20);
        }
      </script>
    </head>
    <body>
      <div id="loader">
        <h1 id="loadertitle">Site</h1>
        <div id="loadingbar">
          <div id="loadingbarprogress">
        </div>
      </div>
      <p id="loadingtext">Loading...</p>
    </div>
  </body>
</html>

I have a div for the loader, a div for the progress, and some script containing a loop (that might not work), changing the width of the progress div.

Fixed code:

<!DOCTYPE html>
<html>
  <head>
    <title>Page 1</title>
    <style>
      #loader {background-color:#ffffff;position:absolute;top:0px;left:0px;width:100%;height:100%;}
      #loadertitle {position:relative;top:20px;left:39%;font-size:120px;}
      #loadingbar {position:absolute;top:50%;left:0px;width:100%;height:8px;background-color:#794c79;border:none}
      #loadingbar::-moz-progress-bar {background-color:#400040;}
      #loadingtext {position:relative;top:13%;left:46%;}
    </style>
    <script>
      var bar = document.getElementById('loadingbar');
      for (int x = 0; x <= 100; x++) {
        bar.value = x;
      }
    </script>
  </head>
  <body>
    <div id="loader">
      <h1 id="loadertitle">Site</h1>
      <progress id="loadingbar" value="10" max="100"></progress>
      <p id="loadingtext">Loading...</p>
    </div>
  </body>
</html>

Thanks, Cameron!

Upvotes: 0

Views: 2153

Answers (2)

user2575725
user2575725

Reputation:

There is a problem in your code. So far I noticed this:

if (progress.style.width = '100%') {//<-- single equals sign, its assignment not condition !

EDIT:

Try this then

if (progress.style.width == '100') {

Upvotes: 1

Cameron Martin
Cameron Martin

Reputation: 6012

HTML5 now has a progress element.

You can get a lot of customisation in some browsers. See the link to css-tricks above, it goes into a fair amount of detail.

<progress max="100" value="80" id="progress_bar"></progress>

Then you can just update the value attribute using javascript, with whatever data source your progress comes from.

If you just want it to increase at a steady rate, use a simple setTimeout:

var progress_element = document.getElementById('progress_bar');
function stepProgress() {
  progress_element.value += 1;
  if(progress_element.value < 100) {
    setTimeout(stepProgress, 100);
  }
};

You may need to use parseInt on your progress_element.value, or just have a separate counter variable.

Upvotes: 4

Related Questions