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;">
</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.
Visualforce Development Cookbook
has a recipe for this; book is chock-o-block of good VF and VF+Js stuff (and I'm not Keir - he goes by the handle Bob Buzzard)