Tutorial:Ajax Loading
In urmatorul tutorial va voi explica cum sa adaugati o animatie pentru Loading.
Codul JS
Acest cod se va adauga in gestiunea codurilor JavaScriptjQuery(function() {
- Cod:
jQuery('body').prepend('<div id="ajax_loading" style=""><img src="http://i58.servimg.com/u/f58/17/89/00/23/ajax_l10.gif" alt="Loading..."></div>');
jQuery('a').click(function() {
jQuery('#ajax_loading').slideDown();
setTimeout('load()', 1000);
});
});
function load() {
jQuery('#ajax_loading').slideUp('1000');
}
setTimeout('load()', 1000);
Codul CSS
Urmatorul cod se adauga in Foaia de Stil CSS
- Cod:
#ajax_loading {
background: url("http://i58.servimg.com/u/f58/17/89/00/23/ajaxlo10.png") repeat-x scroll 0px 0px transparent;
border: 1px solid rgb(123, 166, 13);
border-radius: 0px 0px 5px 5px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2), 0px -1px 0px rgba(255, 255, 255, 0.2) inset;
color: rgb(255, 255, 255);
left: 46%;
padding: 5px 0px 8px;
position: fixed;
text-align: center;
top: 0px;
width: 8%;
z-index: 999;
}