Site hosting news, tutorials, tips, How Tos and more

Programming 101 Tips: 2 Ways to Add a Loading Icon “Spinner” to Your Website

For budding new web developers, here are two ways to add a “spinner” icon to indicate that your website is busy loading data. The first method uses jQuery’s .ajax method and the second method uses Javascript’s new Fetch API. For the spinner icon, we will use an icon from Font Awesome. I prefer this method because it reduces load time. A well crafted css-styled .png/.gif icon would work as well.

First, install Font Awesome by downloading it (you can get the Free for Web version) and then follow the various instructions on their site to add it to your project (look on the right for Using Font Awesome With). Since I am developing with Visual Studio, I just use NuGet’s Package Manager to install it for me. To add it to your web page, add a stylesheet reference in the <head> element. Since I’m using Visual Studio, my reference looks like this:

<link rel="stylesheet" href="/Content/font-awesome.min.css" />


Next, you will also need to install jQuery and add a reference for it as well:

<script src="/Scripts/jquery-3.4.1.min.js"></script>


jQuery can also be installed via NuGet’s Package Manager in Visual Studio.

Now, add the spinner by adding this line to your page in the <body> element:

<div id="Spinner"><i class="fa fa-spinner fa-3x fa-spin"></i></div>


It can be placed anywhere in the <body> element, but I prefer to place it at the top for organization reasons (i.e. easy reference). The <i> element is used to create the font-awesome icon and the “Spinner” id will be used for further styling. Here is the markup for the “Spinner” css:

#Spinner {
    color: blue;
    left: 47%;
    position: fixed;
    top: 47%;
    visibility: hidden;
    z-index: 1;
}


This should place the spinner in the middle of the page and hides it initially until you activate it (i.e. make it visible) via jQuery. The z-index is used to overlay it over a page.

Now, when making your .ajax call, use the following format:

        $.ajax({
            type: "GET", // GET, POST, DELETE, etc.
            url: "https://www.mysite.com/api/dosomething", // some url
            beforeSend: function () {
                $("#Spinner").css("visibility", "visible");
            },
            complete: function () {
                $("#Spinner").css("visibility", "hidden");
            },
            success: function (response) {
                // do something with response data
            }
        });


By changing the value of css property “visibility” using jQuery, you’re turning the spinner on before the ajax call is made and off after it finishes which gives it the illusion that the site is processing data.

If you plan to use Javascript’s new Fetch API, here is the sample markup:

    $("#Spinner").css("visibility", "visible");
    fetch("https://www.mysite.com/api/dosomething") // some url
        .then(response => response.json())
        .then(function (response) {
            // do something with response data
            $("#Spinner").css("visibility", "hidden");            
        })
        .catch(err => {
           // handle error
           $("#Spinner").css("visibility", "hidden");
        });


The spinner is turned on right before the fetch call is made and then off when it completes. I also added it to the catch clause because the spinner would still remain active when it errors out since the code to deactivate it never executes.

Hope these tips help those young and upcoming rock-star developers. šŸ™‚

Visit Winhost to learn more about our ASP.NET hosting solution

Rate this article
   

No responses yet

Have a comment? Make it here!

This site uses Akismet to reduce spam. Learn how your comment data is processed.