JQuery progress bar

A little JavaScript progress bar with JQuery

As it has been a lot of heavyweight programming lately (as well as the code that I have shared here) I wanted to lighten the mood and do a little JavaScript with JQuery again. This is a very simple progress bar that can be used pretty much anywhere. It looks something like this:

0%


Hover over the progress bar to animate it.

The code:

0%
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
var timer = 0;
var perc = 0;

function updateProgress(percentage) {
    $('#pbar_innerdiv').css("width", percentage + "%");
    $('#pbar_innertext').text(percentage + "%");
}

function animateUpdate() {
    perc++;
    updateProgress(perc);
    if(perc < 100) {
        timer = setTimeout(animateUpdate, 50);
    }
}

$(document).ready(function() {
    $('#pbar_outerdiv').mouseenter(function() {
        clearTimeout(timer);
        perc = 0;
        animateUpdate();
	});
});
// ]]></script>

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *