Como usar el plugin Pace en tus proyectos.

Este plugin de jquery es muy útil porque te ayuda a mostrar una barra de progreso mientras se carga el contenido de tu página o realizas una petición ajax.

Su uso es muy simple, solo basta con incluir el javascript y css necesarios.

<link rel="stylesheet" type="text/css" media="screen" href="{{asset('backend/css/pace.css')}}">

<script
    data-pace-options=
        '{ "restartOnRequestAfter": true, "eventLag": false,
            "ajax": { "trackMethods": ["GET", "POST"] }
        }'
    src="{{asset('smart-admin/js/plugin/pace/pace.min.js')}}">
</script> 

La configuración del plugin se especifica en la opción data-pace-options, de lo cual la más importante es la opción ajax, ahi se indica que el plugin este atento a las peticiones POST y GET, pues por default el plugin solo se inicia con las de tipo GET.
Con esto ya tenemos configurado el plugin, sin embargo, si no queremos interactuar con los elementos mientras se muestra la barra de progreso agregamos el siguientecodigo java script despues de agregar el plugin.

<script>
Pace.on("start", function(){
    $("div.locked-pace").show();
});

Pace.on("done", function(){
       $("div.locked-pace").hide();
});

</script>

Y se agrega el siguiente html despues de la etiqueta body.

<div class="locked-pace">
</div>

Y en un archivo css le agregamos los estilos al div.

/*
* CSS Div Locked
*/
div.locked-pace {
position: absolute;
width: 100%;
height: 100%;
z-index: 1900;
background: #fff;
opacity: 0.5;
}

Para revisar más opciones y temas para la barra de progreso consulta http://github.hubspot.com/pace/docs/welcome/