Welcome Guest. Sign in or Signup

1 Comments

How to show a simple busy indicator while doing a long operation?

Asked by: 8843 views
3. Widgets, Common

0
0

You can use an animated gif like below to indicate a long operation, encouraging the user to wait.

For the below code to work, update the url in the ajax call below to a valid url.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>busyIndicator</title>
    <script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
    <style>
    td,table
    {
        border: 1px solid gray;
    }
    
    </style>
    <script type="text/javascript">
    var jsonData;
    $(document).ready(function () {
        $("#load").click(function () {
            var table = $("<table id='tb1'>");            
            $("#tb2").append(table);
            // To show the busy indicator
            $("#busyIndicator").show();            
            $.ajax({
                type: "GET",
                dataType: 'json',
                // This should point to a valid json file with data, with properties Name, dept, stream, coll.
                url: 'data.json',
                success: function (data) {
                    // If the JSON is loading fast, then use the timeout below to simulate delay and see the busy indicator
                    //setTimeout(function () {
                        for (var i = 0; i < data.length; i++) {
                            var r = data[i];
                            var tr = $("<tr><td>" + r.Name + "</td><td> " + r.dept + "</td><td> " + r.stream + " </td><td>" + r.coll + "</td></tr>");
                            // create a tr based on the json data
                            $(table).append(tr);
                        }
                        // to hide the indicator after the data loaded
                        $("#busyIndicator").hide();
                    //}, 1000);
                }
            });
        });
    });
    </script>
</head>
<body>
    <input id="load" type="button" value="LOAD JSON" />
        <div id="tb2">
        <div id="busyIndicator" style="display:none"><img src="http://jqfaq.com/wp-content/uploads/2012/06/busyIndicator.gif" alt='loading' /></div>
        </div>
</body>
</html>

1 Comments



  1. fishinglovers.net on Dec 19, 2014 Reply

    This is one awesome blog article.Really thank you! Great.


Comments on Question