Modal Dialog with Bootstrap Loading Progress Bar | waitingFor

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