0

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>

3
  • Podrias usar un modal de bootstrap.
    – alanfcm
    Commented el 8 may. 2018 a las 17:03
  • Usar un gif para esas tareas es un poco arcaico y poco eficiente.. Utiliza las librerias de Bootstrap y FontAwesome. Aun asi, puedes crear un div que ocupe todo el ancho y alto de la pagina, que se muestre cuando haces la llamada $.ajax, y que cuando reciba los datos, desaparezca. Commented el 8 may. 2018 a las 17:51
  • para gustos hay colores, pero mepa que montar bootstrap y fontawesome sólo para un preloader no es muy eficiente, si no gusta gif se puede usar spin.js.org , svg inline o animaciones css Commented el 8 may. 2018 a las 21:17

1 respuesta 1

2

cómo estás?

Te doy un ejemplo que acabo de armar en un Code Pen, en este caso utilicé un servicio rest api para tomar los datos externamente.

Cualquier duda que tengas me avisas:

https://codepen.io/anon/pen/GdyYZg

$(document).on('click', 'header nav ul li a', function(e){
    
  // evito comportamiento de link
  e.preventDefault();
  
  // tomo json a solicitar
  var jsonGet = $(this).attr('href');
  
  $.ajax({
    url : 'https://jsonplaceholder.typicode.com/' + jsonGet,
    method : 'get',
    beforeSend : function(){
      // utilizo before Send para activar el loader ya que se ejecuta antes de la petición
      $('.loader').show();
      
       // limpio contenedor de resultados
      $('.result .content').html('');
      
    }
  }).done(function(result){
    
    // esto se ejecuta cuando el request del json fue exitoso
    // imprimo los resultados
    
     // si quieres que el loader se vea un poco más, puedes encerrar todo esto en un setTimout();, peor no es necesario
    
    setTimeout(function(){
      $('.result .content').html(JSON.stringify(result));
    
      // ahora escondo el loader
      $('.loader').hide();   
    }, 1500);
    
  })
  
})
.result{
  position: relative;
  min-height: 300px;
  background: #eee;
}
.loader{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*yo usaré background blanco porque mi gif es blanco*/
  background: #fff;
  display: none;
}
.loader img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav>
    <ul>
      <li><a href="posts">Get Posts</a></li>
      <li><a href="comments">Get Comments</a></li>
    </ul>
  </nav>
</header>
<div class="result">
  <div class="content">
    Aquí se cargará tu contenido dinámico.
  </div>
  <div class="loader">
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" />
  </div>
</div>

Saludos!

1
  • Hola Alo Malbarez, muchas gracias, no sabía que se podía hacer eso con un snipet. Commented el 9 may. 2018 a las 13:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.