Progress Bar

ProgressBar is a tiny and simple jQuery plugin that displays status of a determinate or indeterminate process.

It is a visual element to show the progress of an activity. The default theme of the progress bar is gradient; but you can change it on your own. It can divide the progress into several equal parts, and optionaly can show the percentage of the current activity in progress.

The following features are included in Progress Bar:

Ease of use
Divide the progress of an activity into equal parts
Optionaly show the percentage of the current status of the activity
Smooth bar movement
Default gradient theme
Optional Parameters

Step 1:

Pack Your Bags

Download Progress Bar
Add the following markup to your document <head>
You’ll have everything you need to show the progress bar.


/* Attach the Progress Bar CSS file */
<link rel=" stylesheet" type="text/css" href="css/tinytools.progressbar.min.css">
/* jQuery needs to be attached */
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
/* Then attach the Progress Bar plugin */
<script src="tinytools.progressbar.min.js"></script>

Step 2:

Prepare a place holder for the Progress Bar

The container can be a div element. Optionally, you can add an id attribute to the element to use as the jQuery selector:


<div id="ProgressBarSample"></div>

Step 3:

Start The Engine

Put the following code in the ready event of your document to create a Progress Bar for the mentioned div element:


<script>
	$(document).ready(function () {
		$("#ProgressBarSample").progressBar();
	});
</script>

That's all. You added a progress bar as simple as 1-2-3. Optionally, you can pass the setting options to the progressBar() method.

Optional Parameters

Property	Default	Description
width	false	The width of the progress bar. You can define the width of the progress bar in the css of the element. If not defined, the default value will be '200px'
height	false	The height of the progress bar. You can define the height of the progress bar in the css of the element. If not defined, the default value will be '20px'
percent	0	The initial percentage of the progress bar.
showPercent	true	If true, the current percentage will be shown at the center of the progress bar.
split	1	The progress bar will be divided into split parts.
backSplitLineColor	'#999'	The color of the split lines on the background.
foreSplitLineColor	'#ddd'	The color of the split lines on the bar.
onPercentChanged	false	callback that fires after changing the percentage. Parameters: 1- Percentage value, 2- Caller

Methods

Method	Description
$(selector).changePercent(newPercent)	Changes the value of the current percentage of the progress bar.
$(selector).getPercent()	Returns the current effective value of the progress bar percentage. If selector returns more than one progress bar, the percentage of the first one will be the answer.