JQuery ajax loading progress
This will show how you can easily add a JQuery ajax loading progress bar easily. You can do this in less than one minute.
HTML
<div id="loadingDiv" style="display:none;">
<div id="Container">
<img src="images/ajax-loader.gif" alt="loading" /"><span>Loading...</span>
</div>
</div>
Javascripts
// this should be placed in the page
$(document).ready(function () {
// The DOM (document object model) is constructed
// We will initialize the progress bar
InitializeLoadingProgress();
});
// this can be placed in the page or a js file
function InitializeLoadingProgress() {
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function () {
$(this).show();
})
.ajaxStop(function () {
$(this).hide();
});
}
CSS
#loadingDiv
{
width:100px;
height:40px;
left:50%;
top:50%;
padding:1px;
position:absolute;
border:1px solid #A6A1A3;
background-color:#DFDCDC;
}
#loadingDiv #Container
{
width:98px;
height:38px;
vertical-align:middle;
border:1px solid #BFBBBD;
background-color:#F5F0F0;
}
#loadingDiv #Container img
{
vertical-align:middle;
top:7px;
margin:4px;
position:relative;
}
#loadingDiv #Container span
{
top:7px;
position:relative;
color:#B0A7A7;
font-family:Tahoma;
font-size:small;
margin:4px;
}
This ajax loader works in all browsers.
HTML
<div id="loadingDiv" style="display:none;">
<div id="Container">
<img src="images/ajax-loader.gif" alt="loading" /"><span>Loading...</span>
</div>
</div>
Javascripts
// this should be placed in the page
$(document).ready(function () {
// The DOM (document object model) is constructed
// We will initialize the progress bar
InitializeLoadingProgress();
});
// this can be placed in the page or a js file
function InitializeLoadingProgress() {
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function () {
$(this).show();
})
.ajaxStop(function () {
$(this).hide();
});
}
CSS
#loadingDiv
{
width:100px;
height:40px;
left:50%;
top:50%;
padding:1px;
position:absolute;
border:1px solid #A6A1A3;
background-color:#DFDCDC;
}
#loadingDiv #Container
{
width:98px;
height:38px;
vertical-align:middle;
border:1px solid #BFBBBD;
background-color:#F5F0F0;
}
#loadingDiv #Container img
{
vertical-align:middle;
top:7px;
margin:4px;
position:relative;
}
#loadingDiv #Container span
{
top:7px;
position:relative;
color:#B0A7A7;
font-family:Tahoma;
font-size:small;
margin:4px;
}
This ajax loader works in all browsers.
Comments
Post a Comment