Wednesday, 17 October 2018

Show loading using jquery's LoadingOverlay plugin.

Step 1: Include following cdn reference in your html file:
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@1.5.4/src/loadingoverlay.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@1.5.4/extras/loadingoverlay_progress/loadingoverlay_progress.min.js"></script>

Step 2: Write following common methods to show and hide loading:
function showLoading() {
    $.LoadingOverlay("show", {
        image: "",
        fontawesome: "fa fa-spinner fa-spin" // classes from font-awesome.min.css
    });
}
function hideLoading() {
    $.LoadingOverlay("hide");
}

Step 3: Use the above loading functions as bellow code:
showLoading();
hideLoading();

No comments:

Post a Comment