Extremely Simple Progress Bar

**gits** · Nov 27 '07, 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:

[CODE=html]<html>
<head>
<script type="text/javascript">
var prg_width = 200;

function progress() {
var node = document.getEle mentById('progr ess');
var w = node.style.widt h.match(/\d+/);

if (w == prg_width) {
w = 0;
}

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

</script>
</head>

<body onload="var progress_run_id = setInterval(pro gress, 250);">

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

</body>
</html>
[/CODE]
kind regards

**Death Slaught** · Nov 27 '07, 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** · Nov 30 '07, 01:58 PM

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** · Dec 1 '07, 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** · Sep 27 '08, 12:08 AM

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:

[CODE=html]<html>
<head>
<script type="text/javascript">
var prg_width = 200;

function progress() {
var node = document.getEle mentById('progr ess');
var w = node.style.widt h.match(/\d+/);

if (w == prg_width) {
w = 0;
}

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

</script>
</head>

<body onload="var progress_run_id = setInterval(pro gress, 250);">

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

</body>
</html>
[/CODE]
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** · Sep 29 '08, 03:40 PM

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

**Wilder Ness** · Dec 15 '11, 04:42 PM

hi gits,

I stumbled upon this website while googling for an answer and I liked your solution. I have a question though: is it possible to have text (in the center) on top of the percentage bar? I managed to get it as a part of the div (id="progress") element but it only centers within "progress"' s width. I want it to be in the center of the parent div (which has a width of 200px).

**gits** · Jan 3 '12, 04:03 PM

do you mean something like this?

Code:

<html>
    <head>
        <script type="text/javascript">
        var prg_width = 200;
 
        function progress() {
            var node  = document.getElementById('progress');
            var tnode = document.getElementById('progressText');
            var w     = node.style.width.match(/\d+/);
 
            if (w == prg_width) {
                w = 0;
            }

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

            tnode.innerHTML = (val/prg_width * 100).toFixed(0) + ' %';
        }
 
        </script>
    </head>
 
    <body onload="var progress_run_id = setInterval(progress, 250);">

	<div style="width: 200px;">
	    <div id="progressText" style="text-align: center;">&nbsp;</div>
	    <div style="border: 1px solid black; height:5px;">
            <div id="progress" style="height:5px; width:0px; background-color:red;"/>
	    </div>
	</div>
 
    </body>
</html>

**fricike** · Jul 3 '12, 12:46 PM

That's a nice one but maybe you could show an online demo on the site for dummies like me.

**gits** · Jul 16 '12, 10:12 AM

really? this is an example - you would just need to create a file, copy the code into it and open it in your browser. it cant be much more simple to see it in action - and its more to show how easy it is to create such 'widgets' with just a few lines of code, in case someone wants to build his own progressbar.

**lordmat** · Aug 20 '12, 04:24 PM

hi gits,

I am interested in your code, I used in my little project but i want to "attach" the progress bar to my javascript application. Also I want to know how to stop it x) .

Thanks

**gits** · Aug 21 '12, 07:30 AM

as you see it uses a setInterval in the page's onload event. you simply need to find the place in your code where you start an interval like this:

Code:

var progressIntv = setInterval(progress, 250);

and when you want to stop it, just call:

Code:

clearInterval(progressIntv);

as you see the variable progressIntv contains a reference to the interval.

as for the way to include it in your application it would be just guesswork to advice the best way. it depends on your app, because there are different ways and you might use the one that suits your app best.

**lordmat** · Aug 21 '12, 03:37 PM

Hi,

thanks for your quick reply. I finally stopped the progressbar. Actually I know how to attach it to my app, but I´m not sure if it is the best way.

Code:

var koniec = prompt("Enter a number:")

<body onload="var progress_run_id = setInterval(progress, koniec);">

So.

Thanks.

**gits** · Aug 21 '12, 03:47 PM

ummm - what should the posted code show? basicly you influence the progressbar's progress-rate with the second parameter in the setInterval-method, that you obviously want to have set by a user-input? anyway - if it works for you as your app is intended to work then it could be ok :)

Extremely Simple Progress Bar

Extremely Simple Progress Bar

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment