javascript – Site loading progress system

Question:

Some sites like Walking Dead and YouTube have a system‎ that appears at the top when the page is loading and appears either a GIF or CSS3 image surrounding the side or a progress bar. What is the name of this system or how can I make it?

I've done a lot of research trying to find and nothing…

Answer:

In the example below, when loading the home.html page, it will run the Ajax process. ajaxStart (which starts the Ajax process) and ajaxComplete (when it ends Ajax) are the controls for all events that start and stop the process. The divLoading is triggered in ajaxStart and in ajaxComplete I ajaxComplete it 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:

Scroll to Top