Some sites like Walking Dead and YouTube has a system that appears above when the page is loading and an image appears in GIF or CSS3 by flipping on the side or a progress bar. What is the name of this system or how can I do it?
I've done a lot of research trying to find and nothing ...
In the example below, when loading the home.html page, it will run the Ajax process. The ajaxStart (starting Ajax process) and ajaxComplete (when Ajax terminates) are the controls for all events that start and end the process. The divLoading is triggered on ajaxStart and on ajaxComplete I add to it, giving that effect you want.
home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Efeito na Página e Todas Requisições Ajax</title>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function Load(View){
$("#carregar").load(View);
};
$(document).ready(function(e) {
$("#a1").click(function(e) {
Load('page1.html');
});
//CHAMADO NO INICIO DA PÁGINA
Load('page1.html');
});
//EFEITO ESPERADO ...
$(document).ajaxStart(function() {
$("#divLoading").fadeIn(0);
});
$(document).ajaxComplete(function(event, XMLHttpRequest, ajaxOptions) {
$("#divLoading").fadeOut(1250);
});
</script>
</head>
<body>
<div style="display:none;" id="divLoading">
<img src="ajax.gif" border="0" />
</div>
<div>
<a href="javascript:" id="a1">Abrir</a>
</div>
<div id="carregar"></div>
</body>
</html>
page1.html
<h1>Pagina Link 1 - Page.html</h1>
References: