- <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
16  42899  gits 5,390
Expert Mod 4TB
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
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
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.
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
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
gits 5,390
Expert Mod 4TB
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
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 5,390
Expert Mod 4TB
do you mean something like this? - <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;"> </div>
-
<div style="border: 1px solid black; height:5px;">
-
<div id="progress" style="height:5px; width:0px; background-color:red;"/>
-
</div>
-
</div>
-
-
</body>
-
</html>
-
That's a nice one but maybe you could show an online demo on the site for dummies like me.
gits 5,390
Expert Mod 4TB
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.
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 5,390
Expert Mod 4TB
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: - var progressIntv = setInterval(progress, 250);
and when you want to stop it, just call: - 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.
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. -
var koniec = prompt("Enter a number:")
-
-
<body onload="var progress_run_id = setInterval(progress, koniec);">
-
So.
Thanks.
gits 5,390
Expert Mod 4TB
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 :)
it does work but i have to divide the userinputnumber by 2 :/
gits 5,390
Expert Mod 4TB
huh? the parameter you set with the shown code does nothing more then to determine the intervall-poll - so seen from the point of the progress-bar it only determines how 'smooth' the bar is running.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Rob |
last post by:
Hi all,
Is it possible to do a progress bar of gauge bar in asp? If possible could
someone show some sample code on it.
Many thanks,
Rob
|
by: Mike Lundell |
last post by:
what's wrong with this, and .. can you not declare "char" variables?
#include <iostream>
int main()
{
int a = "* * * * * * * *\n";
std::cout << a;
return EXIT_SUCCESS;
}
|
by: Mike Lundell |
last post by:
what's wrong with this, and .. can you not declare "char" variables?
#include <iostream>
int main()
{
int a = "* * * * * * * *\n";
std::cout << a;
return EXIT_SUCCESS;
}
|
by: rusttree |
last post by:
Many moons ago, I took a class in embedded control at school. The
course focused on a micro-controller mounted on a small electric car
that was programmed using simple C code. The...
|
by: |
last post by:
Why is my progress bar displayed only after it's reached 100%?
<html>
<style type="text/css">
#bar{
width: 10px;
height: 14px;
color: white;
font-size: 12px;
overflow: hidden;
|
by: mbatestblrock |
last post by:
hello flash gurus, I am trying to get a very simple task done and for the life of me I cannot get it!
www.shawnamariephotography.com
If you go there I am sure you will see my problem. I took...
|
by: galiorenye |
last post by:
Hi,
Given this code:
A** ppA = new A*;
A *pA = NULL;
for(int i = 0; i < 10; ++i)
{
pA = ppA;
//do something with pA
|
by: James |
last post by:
I've struggled for far too long on this, hoping someone can point me in the
right direction. Created a new C# WebForm application in VS 2008. Added a
"Report". Now all I want to do is have a...
|
by: darrel |
last post by:
I have a web form where people can/will be attaching rather large files via
a file upload field.
I'd like to provide a progress bar and the easiest way to accomplish that
seems to be to...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
| |
