Form Completion Progress Bar With jQuery - FormProgressBar

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.

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' 
  
});

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

  • Publication date: 05.06.2018
  • Source