wokayme/formprogressbar

Form Progress Bar jQuery Plugin

Form Progress Bar jQuery plugin

-Plugin adding progress bar on top to the page, which show how much fields you fill which are required.

-Modules works with validation libraries

Live Demo

You can preview this plugin on: https://wokay.me/projects/progressBar/

Quick Start

Import needed files

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  
  /* plugin files */
<link rel="stylesheet" href="formProgressBar.css">
<script src="formProgressBar.jquery.min.js"></script>

Init form

$("form").formProgressBar()

Options

readCount:true|false - If you turn on this option, form will be use classes to count correct fields. If you use Validator libraries, choice this option.

validClass:'string' - It's class used by validator to show that field is correct filled. If you enabled readCount progress will be based on valicClass. Default class is "valid"

invalidClass:'string' - This same rule, if field become invalid, progress bar change color. Class "error" is default.

percentCounting: true|false - If you want show in percent how much fields from required are filled correct you can enable this option

height: 'int' in pixel - Set height in pixel of progress bar

transitionTime: 'int' in milliseconds - If you want add animation to move progress bar and changing color, set transitionTime to some number in miliseconds

transitionType: ease|linear|ease-in|ease-out|ease-in-out if you set transitionTime you can set how transition should looks like

parentElement: 'string' default: body Element where progressbar html is located

Example initializate option

$("form").formProgressBar({
        readCount: false,
        validClass: 'valid',
        invalidClass: 'error',
        percentCounting: false,
        height: 20,
        transitionTime: 0,
        transitionType: 'ease' //
});

How color change works

There are 2 classes warn and error which are added to #jQueryProgressFormBar > div if some field is invalid to progress bar is added class warn if you have class warn and you try submit form, class is changing for error.

In case you want change color of fields use #jQueryProgressFormBar > div.warn and #jQueryProgressFormBar > div.error selector and change background

Author

Krzysztof Łokaj "Wokay"

• Blog https://wokay.me/
• Twitter https://twitter.com/_Wokay
• Linkedin https://www.linkedin.com/in/wokay/

formprogressbar's Issues

Suggestion: Create an option to change the prepend element

The progress bar works great in a form when using $("form").prepend instead of $("body").prepend, but I had to modify the mimified .js file for it. Creating a option for it would make it easier to select a location for the progress bar on a page.

I really like the FormProgressBar. It's simple and works great with validator libraries (I used this one: https://github.com/ameerthehacker/jquery-simple-validator)

Doesn't show progress bar on refresh of page even when fields have value prefilled

Hi,

I'm using this plugin in one of my project. It works fine but when I refresh the page and the fields already have the values filled in, the progress bar doesn't take that into account. But once I try to refill the values it works fine.

Please help.