Extremely Simple Progress Bar 
November 23rd, 2007, 06:10 PM
|  | Site Addict | | Join Date: Aug 2007 Location: Tennessee
Posts: 952
| | - <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
| 
November 27th, 2007, 11:08 AM
|  | Moderator | | Join Date: May 2007 Location: Munich, Germany
Posts: 4,102
| | | re: Extremely Simple Progress Bar
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: - <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
| 
November 27th, 2007, 03:06 PM
|  | Site Addict | | Join Date: Aug 2007 Location: Tennessee
Posts: 952
| | | re: Extremely Simple Progress Bar
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
| 
November 30th, 2007, 01:58 PM
|  | Site Moderator | | Join Date: Nov 2006 Location: UK
Posts: 14,521
| | | re: Extremely Simple Progress Bar 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.
| 
December 1st, 2007, 06:27 PM
|  | Site Addict | | Join Date: Aug 2007 Location: Tennessee
Posts: 952
| | | re: Extremely Simple Progress Bar
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
| 
September 27th, 2008, 01:08 AM
| | Newbie | | Join Date: Sep 2008
Posts: 4
| | | re: Extremely Simple Progress Bar 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: - <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
| 
September 29th, 2008, 04:40 PM
|  | Moderator | | Join Date: May 2007 Location: Munich, Germany
Posts: 4,102
| | | re: Extremely Simple Progress Bar 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
|  |
Similar Threads | | Thread | Thread Starter | Forum | Replies | Last Post | | Forms | Burns | answers | 2 | November 15th, 2005 06:44 PM | | | | /bytes/about
We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights.
Get the best answers to your questions from over 225,662 network members.
|