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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="formProgressBar.jquery.js"></script>

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

<form>

  <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>

  ...

</form>

$("form").formProgressBar();

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

$("form").formProgressBar({
  percentCounting: true // default: false
});

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

$("form").formProgressBar({
  height: 15 // default: 10
});

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

$("form").formProgressBar({

  // default: 500
  transitionTime: 0,

  //ease, linear, ease-in, ease-out, ease-in-out
  transitionType: 'ease' 
  
});

Changelog:

2018-07-06

• 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.