"Working on it..." Custom Dialog Box in SharePoint

 using Javascript/Jquery(JSOM)

Introduction

This article is about creating "Working on it" Custom Dialog Box  in SharePoint.

Let's Start

Define a global Variable 'waitDialog'.

 var waitDialog = null;  

   While calling a Save function using Rest API or any long Operation function, Call RequestStarted() function at the starting and just before the end of the Save function,  Call  RequestEnded() function.

 function RequestStarted() {  
   ExecuteOrDelayUntilScriptLoaded(ShowWaitScreen, "sp.js");  
   };  
  function RequestEnded() {  
   try {  
    waitDialog.close();  
    waitDialog = null;  
   } catch (ex) { }  
   };  
   function ShowWaitScreen() {  
   try {  
    if (waitDialog == null) {  
    //waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Processing...', 'Please wait while request is in progress.', 100, 380);  
    waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose(SP.Res.dialogLoading15);  
    }  
   } catch (ex) { }  
   }  

   Instead of "Working on it..." Dialog box ,For custom dialog box use following code:-

  waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Processing...', 'Please wait while request is in progress.', 100, 380);