Click here to Skip to main content
13,514,454 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hi I'm using visual studio 2010 .net framework 3.5.
In my project I'm importing excel file and it will take some time to load.
So at this point I want to show something like a wheel that shows loading is in progress and make the screen read might have seen in some webpages.
so I want to know how to implement that.
Please help me in this regard
Posted 9-Jun-14 21:54pm
Rate this: bad
Please Sign up or sign in to vote.

Solution 1

<script src=""></script>

          z-index: 99;
          position: fixed;
          top: 0px;
          left: 0px;
          height: 100%;
          width: 100%;
          background-color: black;
          opacity: 0.4;
          position: fixed;
          top: 50%;
          left: 50%;
          z-index: 100;
          margin-left: -110px;
          margin-top: -110px;
          width: 220px;
          background-image: url('');

function UploadData() {

           $("#DivLoaderContainer").fadeIn(); //set fadeIn whenever ypu want to show loader
               type: "POST",
               url: "PageName.aspx/MethodName",
               contentType: "application/json;charset=utf-8",
               data: {}, //Parameters
               dataType: "json",
               success: function (data) {

                   $("#DivLoaderContainer").fadeOut(); //set logout after finish all process

               error: function (result) {


<div id="DivLoaderContainer">
           <div class="divBackMain">
           <div class="divLoader">
               <img src="" />
HardikPatel89 10-Jun-14 6:47am
My 5+
Smitha5 10-Jun-14 6:48am
Hi Nirav,
Thanks for the reply.
I'm very new to Ajax.Could you please explain in detail like where to add the code that you have mentioned and how it works.
where exactly I need to call any functions.
Thanks in advance
Nirav Prabtani 10-Jun-14 6:56am
There is no role of ajax in my solution ,i have just creat loader using Div.
I have set visible using $("#DivLoaderContainer").fadeIn(); before ajax call
and after completion of ajax call it should be disappear using $("#DivLoaderContainer").fadeOut();
you can set fadeIn and fadeOut as per your need.. :)
Rate this: bad
Please Sign up or sign in to vote.

Solution 2

Hello Smitha, you can use UpdateProgress control provided by AJAX Extensions controls as follows:

ASPX changes:
<asp:ScriptManager ID="ScriptManager1" runat="server">

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
        <asp:Label ID="Label1" runat="server"></asp:Label>
<asp:UpdateProgress ID="UpdateProgress1" runat="server"

        <img alt="please wait..." src="loder.gif" />

Code behind changes:
protected void Button1_Click(object sender, EventArgs e)
    Label1.Text = "Page loaded at: " + DateTime.Now.ToString();

Here I have created a delay using Thread.Sleep() method.
Smitha5 11-Jun-14 6:02am
Thank you.

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

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web03 | 2.8.180417.1 | Last Updated 10 Jun 2014
Copyright © CodeProject, 1999-2018
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100