JavaScript Progress Bar 2

This tutorial will walk you through configuring a JavaScript based progress bar that can triggered by several things. The last tutorial I did, I mentioned doing it with PHP and the results of a query. That is what this tutorial is going to be about. For this tutorial it would be helpful to have a decent amount of entries in the table we will be working with. To assist with this I have uploaded a text file with a query in it to insert 150 rows into a table. Let’s get started:

Go to bram.us to download the files that will make the loading bar work.

javascript_progress_bar_2_01

First you will be at the site to download the software. Click on the link to download the latest version. Save the file to your computer somewhere where you can access it. It will be in ZIP format so you will need to extract the files within it.

javascript_progress_bar_2_02

You should have a folder that contains these folders and the one file. That html file is the demo that is given with the progress bar. You can delete it or you can keep it for you to look at later if you ever want to go back and look at how it works. We, however, will be making a new file from scratch to call these scripts. Let’s make a new file and call it progress.php. Let’s start coding that file.

<script type="text/javascript" src="js/prototype/prototype.js"></script>
<script type="text/javascript" src="js/bramus/jsProgressBarHandler.js"></script>

These lines simply tell our file where to get the JavaScript that we will be calling for.

<?php

$conn = mysql_connect ("localhost","username","password") or die ('cannot connect to database error: '.mysql_error());
mysql_select_db ('dbname');
&#91;/sourcecode&#93;

This starts the section of php coding and the initializes the connection to the database. Remember to change the username, password, and dbname fields to what they are on your database.

&#91;sourcecode language='php'&#93;
$sql="SELECT count(*) from `tutorial`.`tutorial`";
$query = mysql_query($sql);
$row = mysql_fetch_row($query);
$total = $row&#91;0&#93;;
&#91;/sourcecode&#93;

This select returns a count of all the records in the database. In this case (if you used the text file supplied) is 150 records. 

&#91;sourcecode language='php'&#93;
$sql2="SELECT count(*) from `tutorial`.`tutorial` where `updates` = '1'";
$query2 = mysql_query($sql2);
$row2 = mysql_fetch_row($query2);
$signed = $row2&#91;0&#93;;
&#91;/sourcecode&#93;

This select generates a count of how many people have signed up to receive updates about the site. This is indicated by the updates column being a 1. 

&#91;sourcecode language='php'&#93;
$percent = $total - $signed;
$percent = ($percent/$total) * 100;

echo "<H2> Percentage of people signed up for updates </H2>";
echo "<span style='color:#006600;font-weight:bold;'>Percent Completed</span> <br/>";
echo "<span class='progressBar' id='element1'>$percent</span>";

?>

Next, we do the math to figure out the percentage. We take the total record number and subtract the count of those signed up and that gives us the number that aren’t. Then we divide that number by the total and multiply 100 (the progress bar requires a full number and not a decimal). If the value is not a whole number the bar will round to the nearest whole number. Then we show our header for the bar and then show the percent completed logo. Finally, we create the bar with the variable that is calculated by the math.

javascript_progress_bar_2_03

If you open the file in the browse it will run the queries and show the percentage automatically. That concludes this tutorial. I hope you enjoyed it and it was easy to follow. Thanks for reading.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join the TeamTutorials mailing list and get the latest tips, tricks, and special discounts for members only.

Thanks! Please click the link in the email we just sent you to confirm.

  • “Then we put in the authors script to track the product and that completes the file.” – That is not needed 😉

    Nice tutorial!

    Regards,
    Bramus!

  • Yea Mike, I don’t see why he needs to track your javascript site in his analytics account.

    edit: I have removed this from the tutorial.

  • i need to talk with u, i know i have pick your tetourials, but we have another way to make some more business, i m offering you partner link site with your site or some other kind as u like, i hope u agree with me, if u dont , plz reply,,

    Thanks,

  • actually one user pick the data from your site and pasting data on my site,,,, i dont know who is one,,,, ,,
    and u dont know who i m also,, this is not the single person site,, user is posting the data on my site minute by minute,, so…. we are not responsible for this anyways, i have change the some text for your appeal, i m still available with partner for link exchange,,,

    Thanks

  • user is posting the data on my site minute by minute,, so…. we are not responsible for this anyways, i have change the some text for your appeal, i m still available with partner for link exchange…

  • Thanks for posting it, this is a great piece of code and really improves the user experience.

  • when i follow your step, i should use the sql sentence, how can i divide it from specifically database, just write once, and use it somewhere else…

  • Gasparromeo7

    I was too late. the text file does not exist anymore