Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Very easy javascript code to display page "Please wait" using bootstrap modal with nice progress bar.
/**
* Displays overlay with "Please wait" text. Based on bootstrap modal. Contains animated progress bar.
*/
function showPleaseWait() {
if (document.querySelector("#pleaseWaitDialog") == null) {
var modalLoading = '<div class="modal" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false" role="dialog">\
<div class="modal-dialog">\
<div class="modal-content">\
<div class="modal-header">\
<h4 class="modal-title">Please wait...</h4>\
</div>\
<div class="modal-body">\
<div class="progress">\
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"\
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%; height: 40px">\
</div>\
</div>\
</div>\
</div>\
</div>\
</div>';
$(document.body).append(modalLoading);
}
$("#pleaseWaitDialog").modal("show");
}
/**
* Hides "Please wait" overlay. See function showPleaseWait().
*/
function hidePleaseWait() {
$("#pleaseWaitDialog").modal("hide");
}
@buminda

This comment has been minimized.

Copy link

buminda commented Aug 15, 2017

Thanks, if you change CSS we can set the dialog in the center of the screen ,
.modal-dialog { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 500px; height: 300px; }

@GabrielDvt

This comment has been minimized.

Copy link

GabrielDvt commented Nov 1, 2017

Thank you, both!

@ShahinSorkh

This comment has been minimized.

Copy link

ShahinSorkh commented Apr 7, 2018

you have an error here at line 5
var modalLoading = '<div class="modal" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false role="dialog">\
should be
var modalLoading = '<div class="modal" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false" role="dialog">\

@yamyamyuo

This comment has been minimized.

Copy link

yamyamyuo commented Dec 25, 2018

thanks! this is cool

@salimdellali

This comment has been minimized.

Copy link

salimdellali commented Jun 25, 2019

Thank you mate, it's very helpfull and was easy to integrate into my project

@b4oshany

This comment has been minimized.

Copy link

b4oshany commented Sep 13, 2019

The showPleaseWait function adds a new modal element each time it is called. Add a condition so that it creates one modal element and reuse it each time.
E.g.

/**
 * Displays overlay with "Please wait" text. Based on bootstrap modal. Contains animated progress bar.
 */
function showPleaseWait() {
    
    if (document.querySelector("#pleaseWaitDialog") == null) {
        var modalLoading = '<div class="modal" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false" role="dialog">\
            <div class="modal-dialog">\
                <div class="modal-content">\
                    <div class="modal-header">\
                        <h4 class="modal-title">Please wait...</h4>\
                    </div>\
                    <div class="modal-body">\
                        <div class="progress">\
                          <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"\
                          aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%; height: 40px">\
                          </div>\
                        </div>\
                    </div>\
                </div>\
            </div>\
        </div>';
        $(document.body).append(modalLoading);
    }
  
    $("#pleaseWaitDialog").modal("show");
}

/**
 * Hides "Please wait" overlay. See function showPleaseWait().
 */
function hidePleaseWait() {
    $("#pleaseWaitDialog").modal("hide");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.