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/