August 13, 2022

Modal Dialog with Bootstrap Loading Progress Bar | waitingFor

Bootstrap Waitingfor is a modal Dialog with the BS progress bar used to display a popup indicator for the loading cursor using the Bootstrap modal and progress bar components.

show loader on bootstrap modal, jquery loading spinner overlay example, modal progress bar bootstrap 4, modal loading bar, jquery please wait modal popup

Features

  • Compatible with AMD
  • Configurable

Possible options for dialogSize are

  • sm – small
  • m – normal
  • lg – large

Possible options for progressType are

  • success
  • danger
  • warning
  • info

How to make use of it:

Installation:

# NPM
$ npm install bootstrap-waitingfor

# Bower
$ bower install bootstrap-waitingfor

1. Load the primary JavaScript file bootstrap-waitingfor.js after jQuery & Bootstrap libraries.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/bootstrap-waitingfor.js"></script>

2. The JavaScript to indicate a default loading modal.

waitingDialog.show('Loading Something...');

3. Hide the loading modal when the ajax call stops.

waitingDialog.hide();

4. Customize the loading modal utilizing the next choices.

waitingDialog.show('Loading Something...',{

  // if the option is set to boolean false, it will hide the header and "message" will be set in a paragraph above the progress bar.
  // When headerText is a not-empty string, "message" becomes a content above the progress bar and headerText string will be set as a text inside the H3;
  headerText: '',

  // this will generate a heading corresponding to the size number
  headerSize: 3,

  // extra class(es) for the header tag
  headerClass: '',

  // bootstrap postfix for dialog size, e.g. "sm", "m"
  dialogSize: 'm',

  // bootstrap postfix for progress bar type, e.g. "success", "warning";
  progressType: '',

  // determines the tag of the content element
  contentElement: 'p',

  // extra class(es) for the content tag
  contentClass: 'content'

});

5. Available show/hide callback features.

waitingDialog.show('Loading Something...',{

  // after the modal was hidden
  onHide: null, 

  // after the modal was shown
  onShow: null 

});

jQuery Plugin For Bootstrap Loading Modal With Progress Bar, bootstrap-waitingfor Plugin/Github, please wait modal bootstrap


See Demo And Download

Official Website(ehpc): Click Here

This superior jQuery/javascript plugin is developed by ehpc. For extra Advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.