Changing kendo grid loading animation

by manoj

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<div id="grid"></div>

CSS

.k-loading-image {
    background-image: url('http://24.media.tumblr.com/cfa55f70bbc5ce545eed804fa61a9d26/tumblr_mfpmmdCdWA1s1r5leo1_500.gif')
}

#grid .k-grid-content {
    min-height: 100px;
}

.ob-no-data { 
    text-align: center;
    font-size: 2em;
    padding-top: 30px;
}

JavaScript

var entries = [
    {"Codigo": "6140", "Producto": "CIPROXINA FA 200ML 400MG", "Familia": "ANTIBIOTICO 10", "Clasificacion": "CONTROLADOS", "Laboratorio": "BAYER DE MEXICO, SA DE CV"}
];

$("#grid").kendoGrid({
    sortable  : true,
    groupable : true,
    scrollable: true,
    pageable  : {
        pageSizes: 9
    },
    dataSource: {
        transport: {
            read: function (op) {
                setTimeout(function() {
//                    op.success(entries);
                    op.success([]);
                }, 1000);
            }
        }
    },
    dataBound : function (a) {
        if (this.dataSource.data().length == 0) {
            $(".k-grid-content", "#grid").html("<div class='ob-no-data'>Sorry, no data available</div>");
        }
    },
    columns   : [
        { field: "Codigo", title: "Codigo" },
        { field: "Descripcion", title: "Descripcion" },
        { field: "Familia", title: "Familia" },
        { field: "Laboratorio", title: "Laboratorio" },
        { field: "Clasificacion", title: "Clasificacion" }
    ]
});