Pre Loader / Loader Message to show up while doing ajax requests from Visualforce pages

LoadingMessage

<apex:component >
<!-- Attribute Definitions -->
<apex:attribute name="BorderColor" type="String" required="true" description=""></apex:attribute>
<apex:attribute name="Width" type="String" required="true" description=""></apex:attribute>
<apex:attribute name="Height" type="String" required="true" description=""></apex:attribute>
<apex:attribute name="BackColor" type="String" required="true" description=""></apex:attribute>
<apex:attribute name="BackColor" type="String" required="true" description=""></apex:attribute>
<apex:attribute name="BorderSize" type="String" required="true" description=""></apex:attribute>
<apex:attribute name="ImageUrl" type="String" required="false" description=""></apex:attribute>
<apex:attribute name="Message" type="String" required="false" description=""></apex:attribute>
<apex:attribute name="messageStyle" type="String" required="false" description="Message inline style"></apex:attribute>
<apex:attribute name="BorderStyle" type="String" required="false" description="Message box border style: solid, outset, inset, etc"></apex:attribute>

<div id="salesforceSource_blurybackground" style="position:absolute; left:1px; top:1px; width:100%; height:100%; text-align:center; vertical-align: middle; background-color: #333; opacity:0.6;filter:alpha(opacity=60)">
</div>
<div id="salesFroceSource_StatusBox" style="position:relative;width: {!Width}; height:{!Height}; opacity:1;filter:alpha(opacity=100); margin: 0 auto; border-color: {!BorderColor}; border-style:{!BorderStyle}; border-width: {!BorderSize}px;">
	<table border="{!BorderSize}" cellpadding="0" cellspacing="0" style="border: none; width: {!Width}; height:{!Height}; background-color:{!BackColor};">
		<tr>
			<td align="left" valign="top" style="border: none;">
				<table border="0" cellpadding="4" cellspacing="0" style="width: 100%; height: 100%">
					<tr>
						<td style="vertical-align:middle;text-align:center;">
							<img class="waitingImage" src="{!ImageUrl}" title="Please Wait..." />
						</td>
						<td style="vertical-align:middle;{!messageStyle}">
							&nbsp;{!Message}
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>
</div>
</apex:component>

Sample usage

<apex:page showHeader="true" sidebar="false">
	<c:LoadingMessage BackColor="#efefef" borderColor="#999" borderSize="3" borderStyle="solid" height="50px" width="180px"
	Message="Finding References" messageStyle="color:darkred;font-size:10pt;font-family:arial;font-weight:bold;" 
	ImageUrl="/img/loading.gif"/>
</apex:page>