Progression.js – jQuery form progress indicator

A simple jQuery plugin, that gives users real time hints & progress updates as they complete forms.

Form progress indicator tool

Sometimes it’s nice to have such things, that are informing the user about what happens.

Progression.js - form progress indicator
Progression.js – form progress indicator

Usage

Firstly include jQuery and the progression.css and progress.js files. Place these before section

<link href='progression.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="progression.js"></script>

Then we need to create a form, where we have to add a data attribute of data-progression to each element, that needs to be a step in the form progression.

The helper text for the tool-tip can be set by adding data-helper to the element.

<form id="myform">
    <p>
    	<label for="">Name</label> 
    	<input data-progression="" type="text" 
  data-helper="Help users through forms by providing helpful hinters" name="name" value="" placeholder="" />
    </p>
  </form>

Then Initiate the plugin:

$(document).ready(function ($) {
    $("#myform").progression();
});

You can adjust following options:

$("#myform").progression({
        tooltipWidth: '200',
        tooltipPosition: 'right',
        tooltipOffset: '50',
        showProgressBar: true,
        showHelper: true,
        tooltipFontSize: '14',
        tooltipFontColor: 'fff',
        progressBarBackground: 'fff',
        progressBarColor: '6EA5E1',
        tooltipBackgroundColor: 'a2cbfa',
        tooltipPadding: '10',
        tooltipAnimate: true
});

Demo:

http://git.aaronlumsden.com/progression/#demo

GitHub:

https://github.com/aarondo/progression.js

Keep the progress and enjoy!

Share:Share on Facebook1Share on Google+0Tweet about this on TwitterShare on LinkedIn0Pin on Pinterest1