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");
}
@salimdellali
Copy link

salimdellali commented Jun 25, 2019

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

@b4oshany
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");
}

@esdrasobregon
Copy link

esdrasobregon commented Dec 13, 2020

thanks my friend

@petrosmm
Copy link

petrosmm commented Feb 2, 2021

+1 for simplicity...

@akhsiM
Copy link

akhsiM commented Mar 31, 2021

+1, this is great

@shinnida220
Copy link

shinnida220 commented Mar 31, 2021

+1

@cecilia-gh
Copy link

cecilia-gh commented May 4, 2021

Can you include style used? that would save me a lot of time trying to tweak the style to get something that looks acceptable..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment