Loading Animation Image Implementation

Question

I have the following implementation, it works and functional. However I would like to add a loading animation with setup a 4 seconds.

requestStart: function () {
 kendo.ui.progress($("#loading"), true);
},
requestEnd: function () {
  kendo.ui.progress($("#loading"), false);
}

CURRENT IMPLEMENTATION

I have came across the following fiddle, however I could not able to find a way to make it work.

Answer 1

You need to delay the reading of the data for 4 seconds:

var theDataSource = new kendo.data.DataSource({
    transport: {
         read: function (op) {
             setTimeout(function () {
                 op.success(data);
             }, 4000);
         }
    },
    group: {
        field: "series"
    },
    sort: {
         field: "category",
         dir: "asc"
     },
     requestStart: function () {
        kendo.ui.progress($("#loading"), true);
      },
     requestEnd: function () {
          kendo.ui.progress($("#loading"), false);
     }
});

Updated DEMO