Display loading image when adding item in SharePoint list

Today i am going to explain how to show loading/Progress image in SharePoint list new form when new item is added.

Please follow below steps.

1. First you need to download any animated .gif image named it as "Loading.gif". In this example i have used Site Asset library to store the image.
2. Open the list in which you want to show this loading image and click on new item link.
3. SharePoint list NewForm.aspx will open.
4. Now edit the NewForm.aspx page.
5. Add the content editor web-part above the existing web-part.
6. Now add below script,css and image tag by edit the html in content editor web-part.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

<style type="text/css">

   #imgLoading{display:none;}

</style>

<script type="text/javascript">function PreSaveItem() 
{
  $("#imgLoading").css("display", "block");
    if ("function" == typeof (PreSaveAction)) {
        return PreSaveAction();
    }
    return true;
}
</script>
<div style="padding-top: 10px; padding-left: 230px;"> 
   <img width="100" height="100" id="imgLoading" src="/sites/samplesite/SiteAssets/Loading.gif" alt=""/>
</div>

   7. Save the page.
 

   8. Now add item to the SharePoint list.

  9. Once you click on Save button it will showing process image as below.

• In this example we are catching the PreSaveItem() event of the SharePoint list using JavaScript and we have written the business logic in this event.
• This event is fired when we click on save button in SharePoint NewForm.aspx So the process image will be shown until the item is added to the SharePoint list.

Enjoy.....