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

Topics 4

Respuestas 12

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

Responder Seguir topic 0 Denunciar

3 puntos

¿Como comentar?

Para poder comentar necesitas estar Registrado.

Si ya eres miembro ingresa a tu cuenta.

Temas relacionados

[MiniMod] Rangos en los ultimos posts Por Zero Más de 11 meses en Complementos PHPost

[Mini-Mod] proveedores de correo... Por Miguel92 Más de 11 meses en Complementos PHPost

[mini-mod] Loader hasta que la pagina este... Por LordBackFlip Más de 3 meses en Complementos PHPost

Volver atrás

Responder