Tiny Tools

Indicator

Indicator is a simple library to indicate a step or position of a single element among a fixed vertical array of same height elements.


Indicator is a simple library to indicate a step or position of a single element among a fixed vertical array of same height elements.

It is a visual element to indicate the current progress of an activity.

It is also a good solution as a password strength or loading indicator.

In other words, Indicator can be used as an alternative to progress bar with detailed information of the current step of the activity.

Indicator features list:
  • Ease of use
  • Smooth movement
  • Manually switch to the next or previous step, or directly to the first, last, or the specified step
  • No image or non-script content is needed
  • Multiple indicators per page
  • Vertical
  • Optional parameters
Step 1:

Pack Your Bags

  • Download Indicator
  • Add the following markup to your document <head>
  • You’ll have everything you need to indicate to your items.

/* Attach the Indicator CSS file */
<link rel=" stylesheet" type="text/css" href="css/tinytools.indicator.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 Indicator plugin */
<script src="tinytools.indicator.min.js"></script>

Step 2:

Prepare a place holder for the Indicator

You just need to add an empty div element at the position you want to show the Indicator on your page, and set the necessary options. For example, supposing you have a div element on your page which is identified as IndicatorSample. Put the following code in the ready event of your document to create an Indicator for the mentioned div element: 

<script>
	$(document).ready(function () {
		$("#IndicatorSample").indicator({
			height: '300px',
			steps: 10,
			onStepChanged: function () {
				setTimeout(function () { $.indicator.next($("#IndicatorSample")); }, 5000);
			}
		});
	});
</script>

That's all. You will see a working Indicator on your page now. Optionally, you can pass the setting options to the indicator() method.

Optional Parameters

Property Default Description
height false The height of the indicator. You can define it in the css. If not defined, default height would be firstStepDistance + lastStepDistance + 100
steps false The number of steps. It divides the indicator into the specified number of equal steps.
step 0 The initial step in which the indicator will show when the plugin is fired.
firstStepDistance 0 The distance between the top of the Indicator element and the first step.
lastStepDistance 0 The distance between the bottom of the Indicator element and the last step.
moveDuration 1000 The transition time to switch from the current step to the next step in milliseconds.
onStepChanged false Callback that fires after changing to a new step. Parameters: 1- Current step, 2- Caller

Methods

Method Description
$.indicator.next(element) Moves the indicator nub to the next step if applicable. The element parameter is the jquery object of the calling Indicator.
$.indicator.previous(element) Moves the indicator nub to the previous step if applicable. The element parameter is the jquery object of the calling Indicator.
$.indicator.first(element) Moves the indicator nub to the first step. The element parameter is the jquery object of the calling Indicator.
$.indicator.last(element) Moves the indicator nub to the last step. The element parameter is the jquery object of the calling Indicator.
$.indicator.goTo(element, newStep) Moves the indicator nub to the step specified by the newStep parameter (zero based) if applicable. The element parameter is the jquery object of the calling Indicator.