Click here to Skip to main content
Click here to Skip to main content

A master page level spinner animation

, 24 Dec 2013
Rate this:
Please Sign up or sign in to vote.
How to display a spinner with disabled background when doing postback or Ajax call

Introduction

When the page is doing post-back or Ajax call, especially if the action takes a rather long time, we usually expect the page to show a spinner animation to inform the user that the action is ongoing. Further more, it might be even better to have a disabled background to cover the whole page, thus it can forbid user to do any other thing before the action is done.

Solution  

This article introduces a solution for this issue. It puts the spinner, with its background and the nested JS codes into the master page. Thus any inherited page can just call the JS function to display or hide the spinner at any place and any moment needed.  

Description 

First there are two div added into the master page, with its own style definition.

<div id="SpinnerContainer"></div> 
<div id="Spinner" style="background:url(images/spinner.gif) no-repeat center #fff;"></div> 

 Second you need to set the css setting of the two divs above. The most important thing is to set "position" to be "absolute", and set the "z-index" to be rather big numbers so that they can cover the whole page and be on top of any current page control ("Spinner" div is even above the "SpinnerContainer" div).  

 div#SpinnerContainer
        {
            position: absolute;    
            display: none;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: #fff;
            opacity:0.4;
            filter:alpha(opacity=40); /* For IE8 and earlier */
            z-index: 1000; /* Important to set this */
        } 

 div#Spinner
        { 
            position: absolute;
            display: none;
            width:50px;
            height: 50px;
            top: 48%;
            left: 48%;            
            z-index:1001;
            overflow: auto;
        } 

Third, put the manipulation js method into the master page   

        function ToggleSpinnerBlock(Visible) {
            var displayValue = Visible ? "block" : "none";
            document.getElementById("SpinnerContainer").style.display = displayValue;
            document.getElementById("Spinner").style.display = displayValue;
            
            var isIE = navigator.userAgent.indexOf('MSIE') > 0;
            if (Visible && isIE) {
                $('#Spinner').css("backgroundImage", "");
                setTimeout("AppendSpinnerImageForIE();", 10);
            }
        } 
        function AppendSpinnerImageForIE() {
            $('#Spinner').html('<img src="images/spinner.gif" />');
        } 

Some Tricky Points 

 As you can see from the toggle spinner method, if the browser is IE then it does a work around by removing the background image and append an image element into the div. This is because of the known IE issue that the gif animation will get frozen when the page is doing post-back. However, if it is any other browser, this issue does not exists. 

Apply the codes 

So, when you click on a standard .Net button to raise a server event, just define the client-side onclick event, and in the event call js method to show the spinner. Don't forget to return true in the client-side onclick so that page can continue to finish the post back. Codes are like this:

<asp:Button Text="PostBack Button" OnClientClick="return BeforePostBack()" OnClick="btnServerCall_Click" runat="server" ID="btnServerCall" /> 
       function BeforePostBack() {
            $('#PostBackResult').text('');
            ToggleSpinnerBlock(true);
            return true; //So that allow post back to server
        } 

If you are doing an Ajax call,  you only need to display the spinner before Ajax call is raised, and then define the oncomplete function inside which you hide the spinner, like this

           ToggleSpinnerBlock(true);
            $.ajax({
                type: "POST",
                url: "Default.aspx/MyAjaxCall",
                data: '{ MyParam: "test" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    if (msg.d == "OK") {
                        $("#AjaxCallResult").text("Ajax Call is done successfully!");
                    }
                },
                complete: function () {
                    ToggleSpinnerBlock(false);
                }
            }); 

More Possibilities 

You can use your own spinner (.gif) image and define you own opacity effect by modifying the css settings in the sample. This spinner solution is not limited to be used in the the two example cases above. Indeed you can use it for any long-time action, for example, grid sorting, paging, etc. 

License

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

Share

About the Author

Sitang Ruan
Software Developer (Senior) TrafficTech Inc.
Canada Canada
I am Sitang Ruan, a .Net developer focus on web application development for 6 years. I like to write elegant and efficient codes to provide user a smooth and solid experience. I also like to take very complicated and challenging tasks.

Comments and Discussions

 
GeneralMy vote 5 PinprofessionalAntonio Ripa25-Dec-13 2:27 
QuestionNice! PinmemberVolynsky Alex24-Dec-13 11:11 
SuggestionNice to have a code sample PinmemberHamidYaseen24-Dec-13 10:20 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140814.1 | Last Updated 24 Dec 2013
Article Copyright 2013 by Sitang Ruan
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid