Welcome Guest. Sign in or Signup


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

Asked by: 9414 views
3. Widgets, Common


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">

    <script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
        border: 1px solid gray;
    <script type="text/javascript">
    var jsonData;
    $(document).ready(function () {
        $("#load").click(function () {
            var table = $("<table id='tb1'>");            
            // To show the busy indicator
                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
                        // to hide the indicator after the data loaded
                    //}, 1000);
    <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>


  1. fishinglovers.net on Dec 19, 2014 Reply

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

Comments on Question