[mini-mod] Loader hasta que la pagina este cargada completam

Perfil del autor

Iniciado por LordBackFlip
En Complementos PHPost Más de 3 meses


Topic en Complementos PHPost N°400
Público Privacidad
Normal Tipo
3 Respuestas
102 Visitas
3 Puntos
LordBackFlip Pre-Activo 18 1
Topics 4
Respuestas 12
LordBackFlip Pre-Activo
Más de 3 meses
Bueno lo que hace es mostrar un loader mientras la pagina se esta cargando... y cuando la pagina este cargado completamente se quita xD y bueno da la sensación de que al navegar por la pagina esta carga rápido :D 

demo
https://zsky.lucky-forum.com/

IMPORTANTE: esta hecho para que a cualquier elemento <a> que se le de click se muestre el loader si tiene elementos <a> que no llevan a ninguna dirección deberá cambiar esto por una clase o in id, por ejemplo en la web demo que e puesto, solo esta en la clase title que es al darle click a los post
bueno primero nos vamos a funciones.js y al final agregamos

   // Loader by LordBackFlip
$(window).on('load', function() {
window.setTimeout(function() {
$('.brandday').removeClass('lord-ader');
}, 100);
});


     $(document).ready(function(){
       $('a').click(function(){ // <--- Aqui va su clase o id remplazar a
          $('.brandday').addClass('lord-ader');
       });
     });
// End Loader


creamos un archivo llamado loader.css, lo guardamos en la carpeta css y dentro agregamos

 .lord-ader{
width: 110px;
    height: 110px;
    border-radius: 150px;
    border: 12px solid #fff;
    border-top-color: rgba(0,0,0,0.3);
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    animation: lord-ader 1.2s linear infinite;
    -webkit-animation: lord-ader 1.2s linear infinite;
}
.lord-ader * {
    display: none;
}
@keyframes lord-ader{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
@-webkit-keyframes lord-ader{
  0%{-webkit-transform:rotate(0deg)}
  100%{-webkit-transform:rotate(360deg)}
}

nos vamos a main_header.tpl y buscamos


<head>


debajo agregamos


<link rel="preload" href="{$tsConfig.css}/loader.css" as="style">


un poco mas abajo buscamos


<!-- AGREGAMOS UN ESTILO EXTRA SI EXISTE -->

y agregamos debajo


<link href="{$tsConfig.css}/loader.css" rel="stylesheet" type="text/css" />


en el mismo archivo buscamos

<div class="brandday">


remplazamos por

<div class="brandday lord-ader">

y listo 

3 puntos
3
Loading...

¿Como comentar?

Para poder comentar necesitas estar Registrado.


Si ya eres miembro ingresa a tu cuenta.