Form Completion Progress Bar With jQuery - FormProgressBar

File Size: 6.83 KB
Views Total: 9703
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Form Completion Progress Bar With jQuery - FormProgressBar

The FormProgressBar jQuery plugin creates a sticky, animated, auto-update progress bar (with or without percentage values) to indicate how many required form fields have been filled out.

How to use it:

1. Insert the latest version of jQuery library and the jQuery FormProgressBar's files into the document.

<link rel="stylesheet" href="formProgressBar.css">
<script src="" 
<script src="formProgressBar.jquery.js"></script>

2. Call the function formProgressBar on the HTML form and the plugin will do the rest.


  <label for="firstName">First name</label>
  <input name="firstname" type="text" id="firstName" placeholder="" value="" required>

  <label for="lastName">Last name</label>
  <input name="lastname" type="text" id="lastName" placeholder="" value="" required>



3. Decide whether or not to display the percentage value.

  percentCounting: true // default: false

4. Adjust the height of the Form Completion Progress Bar.

  height: 15 // default: 10

5. Customiza the transition effect when updating the Form Completion Progress Bar.


  // default: 500
  transitionTime: 0,

  //ease, linear, ease-in, ease-out, ease-in-out
  transitionType: 'ease' 



  • rename function and standarize file

This awesome jQuery plugin is developed by seapage. For more Advanced Usages, please check the demo page or visit the official website.