Click here to Skip to main content
12,756,745 members (38,246 online)
Click here to Skip to main content
Add your own
alternative version


4 bookmarked
Posted 15 Dec 2013

Example of showing loader using jQuery and closing from code-behind

, 17 Dec 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Example of enabling loader image on button click and (closing or disabling) from code-behind


Loader are frequently used in web-application or website. The example here shows the enabling of loader image from Jquery and closing the loader image with overlay from code-behind. 


Generally, Web developers will be using Loader image when there is some event occurred or precisely, whenever the event takes more time to execute the code we use this loader image to buy some time from the user.

Using the code 

The HTML part of the code design is 

<asp:Button ID="ButtonSubmit" runat="server" Text="Submit" 
            onclick="ButtonSubmit_Click" /> 

In this example, on Button_click the loader image displays. 

 <div class="loading" align="center" id="modalSending">
    <img src="images/loader.gif" width="200px" />

 The mentioned div contains the loader image which displays image with overlay.

function ShowSendingProgress() {
 	var modal = $('<div  />');
    modal.attr("id", "modalSending");
    var loading = $("#modalSending.loading");;
    var top = '215px';
    var left = '560px';
    loading.css({ top: top, left: left, color: '#ffffff' });

The above mentioned script appends the image to the body with the mentioned position. 

function StopProgress() {
    var loading = $(".loading");

The above mentioned script removes the image from the body. 

System.Threading.Thread.Sleep(3000);//moving system to sleep to enable loader
ScriptManager.RegisterStartupScript(this, this.GetType(), "stop loader", 
   "StopProgress();alert('loader removed from code-behind');", true); 

In the code-behind, on button click I have added code to remove the loader on completion of the code execution.   

Using inside ajax update-panel

 This can be used inside updatepanel but need little modification in Button Click i.e. instead of calling through jquery onclick function add the function ShowSendingProgress() onclientclick because, once the page dom is created the ajax update-panel updates only the required panel. 

 <asp:Button ID="ButtonSubmit" runat="server" Text="Submit" OnClick="ButtonSubmit_Click" OnClientClick="javascript:return ShowSendingProgress();" /> 

 I hope this will be helpful for the beginner. 


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Nandakishore G N
Software Developer Canarys Automation Pvt Ltd
India India
Software Engineer in Canarys Automation Pvt Ltd, Bangalore, India.

My Blog

You may also be interested in...


Comments and Discussions

QuestionNice post Pin
Tridip Bhattacharjee17-Dec-13 4:50
memberTridip Bhattacharjee17-Dec-13 4:50 
AnswerRe: Nice post Pin
Nandakishorerao17-Dec-13 5:07
professionalNandakishorerao17-Dec-13 5:07 
BugToo many DIVs Pin
SuMMeR.0216-Dec-13 5:44
memberSuMMeR.0216-Dec-13 5:44 
GeneralRe: Too many DIVs Pin
Nandakishorerao16-Dec-13 18:48
professionalNandakishorerao16-Dec-13 18:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170217.1 | Last Updated 17 Dec 2013
Article Copyright 2013 by Nandakishore G N
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid