Loader in SharePoint forms using jQuery

How to implement Loader in SharePoint forms using jQuery

HTML:-

<div id="ProcessingGifAjax" >
    <img src="../Style%20Library/Images/ajax-loader.gif" alt="processing" />
    <b>Processing...</b><br />
    (please wait)
</div>



<style type="text/css">

#overlay {
        background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
        height: 100%;
        position: fixed;
        width: 100%;
        z-index: 1;
    }

    #ProcessingGifAjax {
        background: #ffffff none repeat scroll 0 0;
        border: 3px solid #50570b;
        border-radius: 15px;
        color: #5d6c8c;
     
        font-family: Arial,Helvetica,sans;
        font-size: 1em;
        height: 90px;
        left: 50%;
        margin: 5px 5px 5px -50px;
        padding: 5px;
        position: fixed;
        text-align: center;
        top: 200px;
        width: 100px;
        z-index: 9000;
    }

</style>

Code:-

$(document).ready(function() {

         $("#ProcessingGifAjax").hide();
     
          $("#btnSubmit").click(function () {
                createItemsToList();           
  });

});


function createItemsToList() {
        debugger;
        $("#ProcessingGifAjax").show();
    $('<div></div>').prependTo('body').attr('id', 'overlay');

       
        var listTitle = "ListName";
       
        //Get the current client context   
        context = SP.ClientContext.get_current();
        var List = context.get_web().get_lists().getByTitle(listTitle);

        //Create a new record
        var listItemCreationInformation = new SP.ListItemCreationInformation();
        var listItem = List.addItem(listItemCreationInformation);

        //Set the values
        listItem.set_item('ProjectID', txtProjectID.val());
        listItem.set_item('ProjectName', ddlProjects.val());
        listItem.set_item('Title', txtTitle.val());         
        listItem.set_item('Description', txtAreaDescription.val());
        listItem.set_item('Typee', ddlType.val());
        listItem.set_item('Phase', ddlPhase.val());
        listItem.set_item('Status', ddlStatus.val());
        listItem.set_item('Impact', ddlImpact.val());
        listItem.set_item('RefID', RefID);


       
        listItem.update();
        context.load(listItem);
        context.executeQueryAsync(createItemsToListSucceeded, createItemsToListFailed);

    }

    function createItemsToListSucceeded() {         
        alert('Form Submitted Successfully');
         $("#ProcessingGifAjax").hide();
     $("#overlay").remove();
         
     
    }

    function createItemsToListFailed(sender, args) {
        alert('Request failed. createItemsToListFailed ' + args.get_message() + '\n' + args.get_stackTrace());
         $("#ProcessingGifAjax").hide();
     $("#overlay").remove();

    }