JavaScript progress bar

Question

I want to have a progress bar (e.g. 200 links total, 20 done, therefore 10% complete). The bar should show when I click on button "validate now".

My requirement is to check 2000 URLs whether they are working or not. This was taking a lot of time while executing in program. So I need to show a progress bar to the user to know the status.

How can I do it using JavaScript?

Answer 1

You could try the jQuery Progress Bar, which uses jQuery to make it very easy to use.

The provided sample uses PHP, but if you want a JavaScript-only solution, just follow these instructions:

1. Download the jQuery Progress Bar ZIP file.
2. Add a reference to the jQuery library to your page. I'd recommend using a reference to http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
3. Add a reference to the ProgressBar scriptfile to your page (js/jquery.progressbar.min.js in the ZIP file)

4. Use this statement in your code to manually update the progress bar:

   $("#progressbardiv").progressBar(percentage);

Where percentage is the fill percentage of the progress bar, and 'progressbardiv' is the placeholder DIV element to display the progress bar.

Answer 2

You would have to use Ajax and hit the server/ database every 2-3 second and fetch the status and display on web page. To display progress bar you can use table with different tds and set the background color of these td cells with the status result.

For progress bar create a table with 10 cells of equal width and say the status is 40% then you will set background of first 4 cells indicating 40%.

Answer 3

you could use the jQuery UI Progress bar simple, good looking and easy to implement, you just need to update the value every second or two.

$("#progressbar").progressbar({
        value: 37
    });

Answer 4

Pure JavaScript is not possible, you need to use Ajax to get the current status which requires Server-Side Scripting (I guess PHP in your case).

Store the total and completed URLs (or their counts) in the database or in a session and use get the percentage of completed URLs from there in PHP, called by a JavaScript Ajax request. Then give the percentage to the jQuery bar as Prutswonder suggested in another answer.

I suggest using JSON or simply Plaintext to receive the Data in JavaScript, XML would be unneccessary overhead (so it's actually AJAJ or AJAP, not Ajax).

Answer 5

I found a pop up Javascript bar. Might need some modifications to fit what you have in mind, but looks promising.

code is

<style>
<!--
.hide { position:absolute; visibility:hidden; }
.show { position:absolute; visibility:visible; }
-->
</style>

<SCRIPT LANGUAGE="JavaScript">

//Progress Bar script- by Todd King ([email protected])
//Modified by JavaScript Kit for NS6, ability to specify duration
//Visit JavaScript Kit (http://javascriptkit.com) for script

var duration=3 // Specify duration of progress bar in seconds
var _progressWidth = 50;    // Display width of progress bar.

var _progressBar = "|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||"
var _progressEnd = 5;
var _progressAt = 0;


// Create and display the progress dialog.
// end: The number of steps to completion
function ProgressCreate(end) {
    // Initialize state variables
    _progressEnd = end;
    _progressAt = 0;

    // Move layer to center of window to show
    if (document.all) { // Internet Explorer
        progress.className = 'show';
        progress.style.left = (document.body.clientWidth/2) - (progress.offsetWidth/2);
        progress.style.top = document.body.scrollTop+(document.body.clientHeight/2) - (progress.offsetHeight/2);
    } else if (document.layers) {   // Netscape
        document.progress.visibility = true;
        document.progress.left = (window.innerWidth/2) - 100+"px";
        document.progress.top = pageYOffset+(window.innerHeight/2) - 40+"px";
    } else if (document.getElementById) {   // Netscape 6+
        document.getElementById("progress").className = 'show';
        document.getElementById("progress").style.left = (window.innerWidth/2)- 100+"px";
        document.getElementById("progress").style.top = pageYOffset+(window.innerHeight/2) - 40+"px";
    }

    ProgressUpdate();   // Initialize bar
}

// Hide the progress layer
function ProgressDestroy() {
    // Move off screen to hide
    if (document.all) { // Internet Explorer
        progress.className = 'hide';
    } else if (document.layers) {   // Netscape
        document.progress.visibility = false;
    } else if (document.getElementById) {   // Netscape 6+
        document.getElementById("progress").className = 'hide';
    }
}

// Increment the progress dialog one step
function ProgressStepIt() {
    _progressAt++;
    if(_progressAt > _progressEnd) _progressAt = _progressAt % _progressEnd;
    ProgressUpdate();
}

// Update the progress dialog with the current state
function ProgressUpdate() {
    var n = (_progressWidth / _progressEnd) * _progressAt;
    if (document.all) { // Internet Explorer
        var bar = dialog.bar;
    } else if (document.layers) {   // Netscape
        var bar = document.layers["progress"].document.forms["dialog"].bar;
        n = n * 0.55;   // characters are larger
    } else if (document.getElementById){
                var bar=document.getElementById("bar")
        }
    var temp = _progressBar.substring(0, n);
    bar.value = temp;
}

// Demonstrate a use of the progress dialog.
function Demo() {
    ProgressCreate(10);
    window.setTimeout("Click()", 100);
}

function Click() {
    if(_progressAt >= _progressEnd) {
        ProgressDestroy();
        return;
    }
    ProgressStepIt();
    window.setTimeout("Click()", (duration-1)*1000/10);
}

function CallJS(jsStr) { //v2.0
  return eval(jsStr)
}

</script>

<SCRIPT LANGUAGE="JavaScript">

// Create layer for progress dialog
document.write("<span id=\"progress\" class=\"hide\">");
    document.write("<FORM name=dialog id=dialog>");
    document.write("<TABLE border=2  bgcolor=\"#FFFFCC\">");
    document.write("<TR><TD ALIGN=\"center\">");
    document.write("Progress<BR>");
    document.write("<input type=text name=\"bar\" id=\"bar\" size=\"" + _progressWidth/2 + "\"");
    if(document.all||document.getElementById)   // Microsoft, NS6
        document.write(" bar.style=\"color:navy;\">");
    else    // Netscape
        document.write(">");
    document.write("</TD></TR>");
    document.write("</TABLE>");
    document.write("</FORM>");
document.write("</span>");
ProgressDestroy();  // Hides

</script>


<form name="form1" method="post">
<center>
<input type="button" name="Demo" value="Display progress" onClick="CallJS('Demo()')">
</center>
</form>

<a href="javascript:CallJS('Demo()')">Text link example</a>

<p align="center">This free script provided by<br />
<a href="http://www.javascriptkit.com"&gt;JavaScript
Kit</a></p>

found here code