The fa.submit.spinner jQuery plugin offers a easy method so as to add a loading spinner to disabled submit buttons in your kinds.
It really works by injecting a spinning icon from the fontAwesome icon library into disabled submit buttons. This could present clear suggestions after customers click on a submit button, making certain they’re conscious that their request is being processed. Builders can even simply customise the spinner markup and CSS types if desired.
Methods to use it:
1. Obtain and cargo the minified model of the faSpinner plugin after jQuery library.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/fa.submit.spinner.min.js"></script>
2. Initialize the plugin on all submit buttons in your HTML kinds.
const occasion = faSpinner.init(); occasion.onload();
3. Customise the loading spinner:
const occasion = faSpinner.init({
// disable this feature to make use of your individual loading spinner
'fontawesome_required' : true,
'fontawesome_url' : 'https://ext.cdn-backslash.ch/lib/font-awesome/4.7/css/font-awesome.min.css',
'btn_text' : '<i class="fa fa-spinner fa-pulse" aria-hidden="true"></i> ',
'btn_replacestyle' : 'prepend',
'btn_selector' : 'button[type=submit]',
// time to attend earlier than displaying the loading spinner
'delay' : 400,
// timeout in ms
'timeout' : 100,
// routinely "spinnerify" any new submit buttons added after web page load
'ajax_listener' : false,
// makes use of data-optionName attribute to config the loading spinner on submit buttons
'use_attribute_definition' : false,
// debug mode
'debugmode' : false
});
This superior jQuery plugin is developed by backslashag. For extra Superior Usages, please verify the demo web page or go to the official web site.
