CSS JQuery Progress Bar
Posted in Uncategorized on June 3rd, 2011 by adminI wanted a simple progress bar to use on a website but didn’t want to have to download a load of images so I wrote a simple JQuery plug-in here it is.
<style type="text/css">
.progressOuter {
border: 1px solid;
width: 100px;
height: 15px;
position: absolute;
}
.progressInner {
border: 1px solid;
background-color: green;
width: 0px;
height: 15px;
position: relative;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script type="text/javascript">
(function( $ ){
$.fn.progressBar = function(settings) {
this.append("<div class='progressOuter'></div><div class='progressInner'></div>");
var progressBarWidth = $(".progressOuter").width();
var incremetWidth = progressBarWidth / settings.steps;
var progressInnerDiv = this.find(".progressInner");
var progress = 0;
settings.incrementFunction(function() {
if (progress < settings.steps) {
progress = progress + 1;
var progressInnerWidth = incremetWidth * progress;
progressInnerDiv.width(progressInnerWidth + "px");
}
});
return this;
};
})( jQuery );
</script>
And it can be used with the following.
$(document).ready(function() {
$("#div").progressBar({
steps : 10,
incrementFunction : function(incrementFunction) {
//an event to trigger the next step in the progress bar
}
});
});
And here is an example of it all together. Right click and view source if you want to see how it all works.