Loading indicator fro remote data Grid

Simulated grid with remote data

HTML

<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.loader.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.1/jquery.mockjax.min.js"></script>
<p> There's a mock'd remote data source (via mockjax.js) that is intentianally set at 1.5sec delay so you can see the loader.

<div id="grid1"></div>

<div id="log" style="overflow:auto; height:200px; background-color:#f2f2f2; padding:5px"></div>

CSS

body > span.ui-igloadingmsg > p {
    position: relative;
    width: 18em;
    left: -8em;
    
    /* Consider some styling for the text so it's clear on top of the grid text.
    */
    background-color: rgba(234, 234, 234, 0.9);
}

JavaScript

$.ig.loader({
    scriptPath: 'http://cdn-na.infragistics.com/jquery/20131/latest/js/',
    cssPath: 'http://cdn-na.infragistics.com/jquery/20131/latest/css/',
    theme: 'metro'
});

$.ig.loader("igGrid.Responsive.Hiding.Paging.Updating", function () {

    /*
     * Override the default Loading widget create to also add a paragraph
     */
    var originalCreate = $.ui.igLoading.prototype._create;
    $.ui.igLoading.prototype._create = function () {
        // create
        originalCreate.apply(this);
        if (this._indicator.children("p").length === 0) {
            this._indicator.append("<p>Please wait while we are fetching your data</p>");
        }
    };
    
    
    
    $("#grid1").igGrid({
        height: "400px",
        dataSource: 'http://domain.com/admin-new/users.php?mode=getUsers',
        updateUrl: 'http://domain.com/admin-new/users.php?mode=updateUser',
        responseDataKey: "results",
        primaryKey: 'id',
        autoGenerateColumns: false,
        autoGenerateLayouts: false,
        columns: [{
            key: 'id',
            dataType: 'number',
            headerText: 'Id'
        }, {
            key: 'fullname',
            dataType: 'string',
            headerText: 'Full Name'
        }, {
            key: 'fname',
            dataType: 'string',
            headerText: 'First name'
        }, {
            key: 'lname',
            dataType: 'string',
            headerText: 'Last Name'
        }, {
            key: 'username',
            dataType: 'string',
            headerText: 'User Name'
        }, {
            key: 'userLevel',
            dataType: 'string',
            headerText: 'User Level'
        }, {
            key: 'userGroupId',
            dataType: 'string',
            headerText: 'User Group'
        }, {
            key: 'email',
            dataType: 'string',
            headerText: 'Email'
        }, {
            key: 'status',
            dataType: 'bool',
            headerText: 'Status'
 ...