Wednesday, June 19, 2013

Showing a Loading Spinner for long-running form submits in ASP.net

If a form submit takes long time due to any underground operations such as executing heavy database queries, XML parsing, etc , you may need to show the user that some processing is going on. Studies shows that average maximum waiting time of an website user is 10 seconds before he will dispose the page or try to do something. Well we don't need that.  At old days we used to show a hour glass animation to do this, but nowadays spinner is quite popular.

Simplest way to do this is, creating a div and put a <img> control inside of the div and set its source to a gif image of a spinner. It works out in most of the browsers but unfortunately not in IE 9 or in any older IE versions. Then I found out about spin.js which works in all major browsers, even in IE6. So instead of placing a gif in the div, I targeted that div for the spinner.


Reference to spin.js libaray -

<script type="text/javascript" src="@Url.Content("~/Content/spin.min.js")"></script>

HTML for loading div -

    <div id="processing">
        <div id="content">
            <p id="loadingspinner">
                Creating SPs...
            </p>
        </div>
    </div>

CSS styling -

#processing
{
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.6);
    z-index: 1000;
}

#content
{
    display: table;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

#loadingspinner
{
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    text-align: center;
    font-size: larger;
    padding-top: 75px;
}

Script to show div when proceed button clicked -

 $(function () {
        $("#proceedButton").click(function () {
            $("#processing").fadeIn();
        });
    });

Script to display the spinner to indicate loading -

    $(function () {
        $("#proceedButton").click(function () {
            $("#processing").fadeIn();
            var opts = {
                lines: 12, // The number of lines to draw
                length: 7, // The length of each line
                width: 4, // The line thickness
                radius: 10, // The radius of the inner circle
                color: '#000', // #rgb or #rrggbb
                speed: 1, // Rounds per second
                trail: 60, // Afterglow percentage
                shadow: false, // Whether to render a shadow
                hwaccel: false // Whether to use hardware acceleration
            };
            var target = document.getElementById('processing');
            var spinner = new Spinner(opts).spin(target);
        });
    });

That's it. Works like magic.. ;)

But if you wan't to show the spinner when you are doing some work through a ajax postback, found a nice little article to achieve that too.

1 comment:

  1. This is a really good post, but I am having a hard time getting it to work in asp.net. I am guessing it has to do with where I am putting the scripts themselves. I am not sure if I should put them in the master page or on the content page - and if so on the content page, where?

    ReplyDelete