Extremely Simple Progress Bar

Death Slaught · #1 November 23rd, 2007, 06:10 PM

Expand|Select|Wrap|Line Numbers

 <html>

<head>

<script type="text/javascript">

  function progress() {

   if (document.images["bar"].width < 400) {

    document.images["bar"].width += 5;

    document.images["bar"].height = 5;

   } else {

    clearInterval(ID);

   }

  }
 
var ID;

window.onload = function() {

  ID = setInterval("progress();", 500);

}

</script>

</head>

<body>

<img src="black.gif" name="bar" />

</body>

</html>

black.gif is an extremely small square I made in paint.

- Death

gits · #2 November 27th, 2007, 11:08 AM

hi ...

good work very simple ... yes :) ... have a look at the following example that uses no image at all ... simply div/css, may be that could be used as an alternative pure dhtml-solution:

Expand|Select|Wrap|Line Numbers

 <html>

    <head>

        <script type="text/javascript">

        var prg_width = 200;
 
        function progress() {

            var node = document.getElementById('progress');

            var w    = node.style.width.match(/\d+/);
 
            if (w == prg_width) {

                w = 0;

            }
 
            node.style.width = parseInt(w) + 5 + 'px';

        }
 
        </script>

    </head>
 
    <body onload="var progress_run_id = setInterval(progress, 250);">
 
        <div style="border: 1px solid black; width:200px; height:5px;">

            <div id="progress" style="height:5px; width:0px; background-color:red;"/>

        </div>
 
    </body>

</html>

kind regards

Death Slaught · #3 November 27th, 2007, 03:06 PM

Nice I never thought of doing it like that, I was going to add on to it making it more complecated when I got time.

Thanks, Death

acoder · #4 November 30th, 2007, 01:58 PM

Quote:

Originally Posted by Death Slaught

Nice I never thought of doing it like that, I was going to add on to it making it more complecated when I got time.

You could show the current percentage complete as the next step.

If this could be linked to some activity rather than just progress at regular intervals, it might have more use rather than just replace an animated loading indicator image.

Death Slaught · #5 December 1st, 2007, 06:27 PM

Yeah I planned on doing just that. The problem is, my free time is at an all time low. I have an extra credit site i'm working on, a site for a friends club, and high school to deal with :). So the second I get some free time, hopefully i'll have some in my first period, biology=boredom.

- Death

hannie · #6 September 27th, 2008, 01:08 AM

Quote:

Originally Posted by gits

hi ...

good work very simple ... yes :) ... have a look at the following example that uses no image at all ... simply div/css, may be that could be used as an alternative pure dhtml-solution:

Expand|Select|Wrap|Line Numbers

 <html>

    <head>

        <script type="text/javascript">

        var prg_width = 200;
 
        function progress() {

            var node = document.getElementById('progress');

            var w    = node.style.width.match(/\d+/);
 
            if (w == prg_width) {

                w = 0;

            }
 
            node.style.width = parseInt(w) + 5 + 'px';

        }
 
        </script>

    </head>
 
    <body onload="var progress_run_id = setInterval(progress, 250);">
 
        <div style="border: 1px solid black; width:200px; height:5px;">

            <div id="progress" style="height:5px; width:0px; background-color:red;"/>

        </div>
 
    </body>

</html>

kind regards

Really simple and useful progress bar.
BTW, how to detect the software image in jar or zip on completing download/upload so the progress bar disappears after loading.
Thanks.

Hannie

gits · #7 September 29th, 2008, 04:40 PM

Quote:

Originally Posted by hannie

Really simple and useful progress bar.
BTW, how to detect the software image in jar or zip on completing download/upload so the progress bar disappears after loading.
Thanks.

Hannie

could you please explain in more detail what you want to do? typically you should wrap the shown code in a function and call it to start the progress-bar when you start a XMLHttpRequest. When the request is ready you just have to clear the interval and/or hide the progress-bar and display the received result in the request-object's final callback ...

kind regards

Extremely Simple Progress Bar

re: Extremely Simple Progress Bar

re: Extremely Simple Progress Bar

re: Extremely Simple Progress Bar

re: Extremely Simple Progress Bar

re: Extremely Simple Progress Bar

re: Extremely Simple Progress Bar

/bytes/development

/bytes/it

/bytes/about