Question

I want to apply some custom styling to the jquery loading dialog but can’t find anything in the docs to do this.

Answer 1

When you can’t find any docs, where do you look? Source code.

I looked up showPageLoadingMap at https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.init.js. The relevant portion is reproduced here:

showPageLoadingMsg: function() {
    $html.addClass( "ui-loading" );
    if ( $.mobile.loadingMessage ) {
        var activeBtn = $( "." + $.mobile.activeBtnClass ).first();

        $loader
            .find( "h1" )
                .text( $.mobile.loadingMessage )
                .end()
            .appendTo( $.mobile.pageContainer );

        checkLoaderPosition();
        $window.bind( "scroll", checkLoaderPosition );
    }
},

Here, $html is just a reference to $('html'), and $loader is defined earlier as this:

// loading div which appears during Ajax requests
// will not appear if $.mobile.loadingMessage is false
var $loader = $( "<div class='ui-loader '><span class='ui-icon ui-icon-loading'></span><h1></h1></div>" );

So it looks like you can adjust the styles on these elements/classes appropriately. The css selectors might look like this:

body.ui-loader { ... }
div.ui-loader { ... }
div.ui-loader span.ui-icon-loading { ... }
div.ui-loader h1 { ... }
...etc...