Example Ajax Loader
Blackens screen with opacity and displays a message.
by Sean Coyne
HTML
<table width="100%">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fake site 1</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fake site 2</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fake site 3</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fake site 4</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fake site 5</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fake site 6</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fake site 7</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fake site 8</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fake site 9</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fake site 10</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fake site 11</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fake site 12</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
...JavaScript
function showLoader(message) {
if (typeof message === "undefined") {
message = "Loading...";
}
var top = Math.max($(window).height() / 2 - 600 / 2, 0);
var left = Math.max($(window).width() / 2 - 400 / 2, 0);
$('<div class="ajax-loader">' + message + '</div>').hide().css({
opacity: 0.8,
backgroundColor: "#000",
color: "#fff",
width: "600px",
height: "400px",
position: "absolute",
top: top,
left: left,
textAlign: "center",
fontSize: "44px",
paddingTop: "80px"
}).appendTo("body").fadeIn("slow");
}
function hideLoader() {
$("body div.ajax-loader").fadeOut("slow", function() {
$(this).remove();
});
}
$(document).ready(function() {
showLoader("Its working!!!");
hideLoader();
});