Bueno pasa que quiero agregar un gif Loading y que se ejecute cada ves que realizo un click en link, pasado un cierto tiempo me cargue la página, el gif deberia estar centrado y que agregue una clase de background oscuro al todo el body, estoy utilizando codeigniter, por fa ayudenme..
var ajax_loader = '<div class="container"><img src="<?php echo base_url() ?>assets/template/imagen/ajax-loader.gif" alt=""></div>';
base_url = $('#base_url').val();
$(document).ready(function() {
$("a#direccion1").on("click", function() {
$("#mostrarPagina").html(ajax_loader).fadeIn(5000).load(base_url + "mantenimiento/logistica/listatrabajador");
$("li#lista1").addClass("active");
$("li#lista2").removeClass("active");
$("li#lista3").removeClass("active");
$("li#lista4").removeClass("active");
$("li#lista5").removeClass("active");
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container" id="mostrarPagina">
<!--aqui cargara la pagina-->
div para todas las paginas..
</div>
</body>
</html>