loading progress

Q. How to Use Loading Progress GIF Image in mvc using Jquery ?

The Loading Progress GIF Image will be displayed in center of Page (View) and will be shown when the Page has started loading in Browser and it will be hidden as soon as the Page loading is completed using JavaScript.

<script src=”~/Scripts/jquery-1.10.2.min.js”></script>

    <link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” rel=”stylesheet” />

<div>

        <div align=”center” id=”spinner” class=”spinner” style=”display:none;”>

            <img id=”img-spinner” src=”/image/transparent-loading-gif-free-4.gif”/>

        </div>           

           </div>

<script type=”text/javascript”>

        var BaseUrl = “http://localhost:2562/”;

        $(document).ready(function () {

            loadData();

        });

        function loadData() {

            //alert(“reached here”);

            $(‘#spinner’).show();

            $.getJSON(BaseUrl + “Base/GetbyID”)

              .done(function (result) {

                  var html = ”;

                  $.each(result, function (key, item) {

                      html += ‘<tr>’;

                      html += ‘<td>’ + item.ItemName + ‘</td>’;

                      html += ‘<td><img src=”/image/images.png” alt=”” width=”64″ height=”40″/><span>’ + item.ItemCount + ‘</span></td>’;

                      html += ‘</tr>’;

                  });

                  $(‘#spinner’).hide();

                  $(‘.tbody’).html(html);

              })

              .fail(function (jqxhr, textStatus, error) {

                  var err = textStatus + “, ” + error;

                  console.log(“Request Failed: ” + err);

              });

        }

    </script>

OutPut -: 

Leave a comment

Your email address will not be published. Required fields are marked *