Popup "spinner" style apex:actionStatus

I adopted sfdcfox's answer, lightening the mask opacity, adding a white background window and text. I also used the Salesforce provided loading.gif.

Here's the final result:

Here's the code:

<apex:actionStatus id="status">
    <apex:facet name="start">
    <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.25; z-index: 1000; background-color: black;">
        &nbsp;
    </div>
    <div style="position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 15% 50%">
        <div style="display: inline-block; padding: 2px; background-color: #fff; width: 125px;">
            <img src="/img/loading.gif" style="float: left; margin: 8px;" />
            <span style="display: inline-block; padding: 10px 0px;">Please Wait...</span>
        </div>
    </div>
    </apex:facet>
</apex:actionStatus>

Adjust the margin in the second div margin: 15% 50% to position the popup where you want.

Here's one such example:

public class loadingSpinnerCtrl {
    public void spin() {
        long now = datetime.now().gettime();
        while(datetime.now().gettime()-now<5000); // Busy loop for 5000 ms
    }
}

Page:

<apex:page controller="loadingSpinnerCtrl">
    <apex:form id="form">
        <apex:commandButton action="{!spin}" value="Show Spinner" rerender="form" status="status" />
        <apex:actionStatus id="status">
            <apex:facet name="start">
            <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.75; z-index: 1000; background-color: black;">
                &nbsp;
            </div>
            <div style="position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 30% 50%">
                <img src="http://upload.wikimedia.org/wikipedia/commons/e/ed/Cursor_Windows_Vista.gif" />
            </div>
            </apex:facet>
        </apex:actionStatus>
    </apex:form>
</apex:page>

Feel free to adjust CSS as you like. Works in my developer org.

Edit: Moved margin up by 20%. Now much closer to center of screen.

You don't need to use controllers for this:

<style>
    .spinnerBg{
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #000;
        opacity: 0.2;
        z-index: 999999;
    }
    .spinner{
        width: 100%;
        height: 100%;
        position: absolute;
        background-image: url("/img/loading32.gif");
        background-size: 16px;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        z-index: 9999999;
        opacity: 1;
    }
</style>

<apex:actionStatus id="spinnerStatus">
    <apex:facet name="start">
        <div class="spinnerBg" />
        <div class="spinner" />
    </apex:facet>
</apex:actionStatus>

then you just reference the status id on your action as usual:

<apex:commandButton status="spinnerStatus"..