в шаблоне:
<div id="ajax_loading">
<div class='bar'>
<div id="noTrespassingOuterBarG">
<div id="noTrespassingFrontBarG" class="noTrespassingAnimationG">
<div class="noTrespassingBarLineG">
</div>
<div class="noTrespassingBarLineG">
</div>
<div class="noTrespassingBarLineG">
</div>
<div class="noTrespassingBarLineG">
</div>
<div class="noTrespassingBarLineG">
</div>
<div class="noTrespassingBarLineG">
</div>
</div>
</div>
</div>
</div>
стили:
#ajax_loading {z-index: 1000}
#ajax_loading .bar{
width:160px;
position:absolute;
left:50%;
margin-left:-80px;
top:50%;
z-index: 1500;
}
#noTrespassingOuterBarG{
height:20px;
width:160px;
border:1px solid #B8B9BF;
overflow:hidden;
background-color:#E0E0E0}
.noTrespassingBarLineG{
background-color:#B8B9BF;
float:left;
width:14px;
height:120px;
margin-right:24px;
margin-top:-28px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.noTrespassingAnimationG{
width:236px;
-moz-animation-name:noTrespassingAnimationG;
-moz-animation-duration:0.9s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-webkit-animation-name:noTrespassingAnimationG;
-webkit-animation-duration:0.9s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-ms-animation-name:noTrespassingAnimationG;
-ms-animation-duration:0.9s;
-ms-animation-iteration-count:infinite;
-ms-animation-timing-function:linear;
-o-animation-name:noTrespassingAnimationG;
-o-animation-duration:0.9s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
animation-name:noTrespassingAnimationG;
animation-duration:0.9s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
#noTrespassingFrontBarG{
}
@-moz-keyframes noTrespassingAnimationG{
0%{
margin-left:0px;
}
100%{
margin-left:-38px;
}
}
@-webkit-keyframes noTrespassingAnimationG{
0%{
margin-left:0px;
}
100%{
margin-left:-38px;
}
}
@-ms-keyframes noTrespassingAnimationG{
0%{
margin-left:0px;
}
100%{
margin-left:-38px;
}
}
@-o-keyframes noTrespassingAnimationG{
0%{
margin-left:0px;
}
100%{
margin-left:-38px;
}
}
@keyframes noTrespassingAnimationG{
0%{
margin-left:0px;
}
100%{
margin-left:-38px;
}
}
jQuery
$(document).ajaxStart(function() {
$('#ajax_loading').show()
});
$(document).ajaxStop(function() {
$('#ajax_loading').hide()
});
все просто как два пальца. Единственное, это работает только для асинхронных запросов) Впрочем, их большинство.
ну и тут просто показывается, что идет загрузка.
