Skip to content

Instantly share code, notes, and snippets.

@Ravaelles
Last active September 27, 2022 05:54
Show Gist options
  • Save Ravaelles/0507c53597c8a82168eb to your computer and use it in GitHub Desktop.
Save Ravaelles/0507c53597c8a82168eb to your computer and use it in GitHub Desktop.
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
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
Copy link

Thank you, both!

@ShahinSorkh
Copy link

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
Copy link

thanks! this is cool

@salimdellali
Copy link

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

@b4oshany
Copy link

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

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

+1

@cecilia-gh
Copy link

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

@amitsharmanhes
Copy link

amitsharmanhes commented Aug 25, 2022

@buminda
Instead of writing CSS for modal center, you can use modal-dialog-centered class near modal-dialog class

@professorsourabh
Copy link

thank you soo much

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