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


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=""></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">
    	<label for="">Name</label> 
    	<input data-progression="" type="text" 
  data-helper="Help users through forms by providing helpful hinters" name="name" value="" placeholder="" />

Then Initiate the plugin:

$(document).ready(function ($) {

You can adjust following options:

        tooltipWidth: '200',
        tooltipPosition: 'right',
        tooltipOffset: '50',
        showProgressBar: true,
        showHelper: true,
        tooltipFontSize: '14',
        tooltipFontColor: 'fff',
        progressBarBackground: 'fff',
        progressBarColor: '6EA5E1',
        tooltipBackgroundColor: 'a2cbfa',
        tooltipPadding: '10',
        tooltipAnimate: true



Keep the progress and enjoy!