Tiny Tools

Progress Bar

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


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.