Loading spinner overlay for hybrid/mobile web applications

Below is the spinner I have implemented in one of my projects. Below are the components you need to place in your respective Javascript, Css and HTML pages -

Javascript:
function showOverlay() {
document.getElementById("OVERLAY_ID").style.display = "block";
}

function hideOverlay() {
document.getElementById("OVERLAY_ID").style.display = "none";
}

CSS:
.overlay {

Spinner Image(loading.gif)

    background-color: grey;
    top:0;
    left:0;
    width:100%;
    height:100%;
    position: absolute;
    -moz-opacity: 0.70;
    opacity:.70;
    filter: alpha(opacity=70);
 }
.loaderPosition {
    margin:0 auto;
    height:42px;
    width:42px;
    position:absolute;
    top:48%;
    left:46%;
 }

HTML:
<div id="OVERLAY_ID" class="overlay" style="display:none">
<img src="img/loading.gif" alt="Loading..." class="loaderPosition">
</div>

jQuery Mobile: Events

Orientation events:

• At times a user will change the orientation of device when using an application, which could happen as a result of general movement of the device.
• Orientation events are triggered when you rotate the mobile device vertically or horizontally i.e. change your mobile device orientation.

Example:

$(window).on("orientationchange", function(event){
      alert("Orientation Change");
});