jQM - Custom Ajax spiner

by Dragan Gaić

HTML

<link rel="stylesheet" href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-fluid960.css">
<script src="http://timeago.yarp.com/jquery.timeago.js"></script>
<script src="http://imakewebthings.github.com/jquery-waypoints/waypoints.min.js"></script>
	<!DOCTYPE html>
    <html>
        <head>
            <title>jQM Complex Demo</title>
            <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
            <style>
                
                .ui-loader-default {
					opacity: 1 !important;		
                }
                
                .custom-spinner {
					width: 37px !important;
					height: 37px !important;
					background-image:url('http://pictures.reuters.com/ClientFiles/RTR/Images/ajax-loader.gif');
					display: block;
                }
            </style>
            <script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
            <script>
                $( document ).bind( 'mobileinit', function(){
					$.mobile.loader.prototype.options.text = "loading";
					$.mobile.loader.prototype.options.textVisible = false;
					$.mobile.loader.prototype.options.theme = "a";
					$.mobile.loader.prototype.options.html = "<div class='custom-spinner'></div>";
                });	
            </script>   	
            <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
            <script>
                $(document).on('pageshow', '#index', function(){       	
					$.mobile.loading( 'show');			
                });	
            </script>
        </head>
        <body>
            <div data-role="page" id="index">
                <div data-theme="a" data-role="header">
                    <h3>
                        First Page
            ...

JavaScript

$(document).on('pagebeforeshow', '#index', function(){       

});

$(document).on('pagebeforeshow', '#second', function(){       

});