preloader para mi Página Web

techestetikglobal · #1 (**permalink**) 13/02/2015, 17:18

Buenas amigos estoy interesado en aprender un preloader para páginas web ya que no se hacerlo quién podría ayudarme porfavor

Flow89 · #2 (**permalink**) 13/02/2015, 17:29

Vi un tutorial que aunque estaba en ingles, se entiende bastante bien, esta muy bien explicado.

Te dejo el enlace http://www.alessioatzeni.com/blog/cs...t-supports-it/

También hay un monton de preloaders ya diseñados ("preloader plugins") que puedes implementar buscando en google.

Un saludo

techestetikglobal · #3 (**permalink**) 13/02/2015, 17:50

Amigo ya intente hacer esa pero desconozco totalmente como adaptarlo a mi página por ello lo veo como complicado no sabras de otro modo más sencillo porque este no lo entiendo porfavor

techestetikglobal · #4 (**permalink**) 13/02/2015, 17:51

Y gracias por tu aporte

lauser · #5 (**permalink**) 14/02/2015, 14:11

Es muy simple, tan solo tienes que seguir los dos o tres pasos que te indican.

Flow89 · #6 (**permalink**) 14/02/2015, 14:22

Código Javascript:

Ver original<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 Preloader Animation </title>
<style type="text/css">
 
/* Full Width Progress Bar */
 
#preloader { 
    width:100%; 
    height:5px;  
    background:#000;
    top:50%;
    position:absolute;
}
 
.expand { 
    width:100%; 
    height:1px; 
    margin:2px 0; 
    background:#2187e7; 
    position:absolute;
    box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7);
    -moz-animation:fullexpand 2000ms cubic-bezier(1.000, 0.610, 0.970, 0.000); /* Set the duration of the animation */
    -webkit-animation:fullexpand 2000ms cubic-bezier(1.000, 0.610, 0.970, 0.000);
}
 
@-moz-keyframes fullexpand {
    0%  { width:0px;}
    100%{ width:100%;}  
}
@-webkit-keyframes fullexpand {
    0%  { width:0px;}
    100%{ width:100%;}  
}
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    var ua = $.browser; /* Create a variable for browser info */
    $('.container').hide(); /* Hide the content */
    
    /* If the Version or Firefox is < or = 5.0 the preloader not display, the same function applies to old Version Safari and Chrome and finally Opera and IE they don't support CSS3 Animation */
    if (ua.mozilla && ua.version <='5.0' || ua.safari && (navigator.appVersion.indexOf('3.') != -1) || ua.opera || ua.msie){
        /* If the condition is true the content will be displayed immediately */
        $('.container').show();
    }
    else { /* Otherwise appears the preloader */
        /* Insert the markup preloader usign jQuery */
        $('body').append('<div id="preloader"><span class="expand"></span></div>');
        /* The animation during 2sec, change the delay parameter to extend or decrase the animation, remember to change the duration of the animation also in CSS */
        $('#preloader').delay(2000).fadeOut('slow', function() {
        $('.container').fadeIn('fast');  
    });     
    }
});
</script>
</head>
<body>
<div class="container">
 aqui tu página
</div>
</body>
</html>

Con copiar y pegar basta, no puedo creer que te parezca complicado, simplemente parate a leerlo con detenimiento (traducelo si te hace falta) y verás como no solo entiendes ese ejemplo, si no que puedes llegar a crear uno propio.

Un saludo

techestetikglobal · #7 (**permalink**) 18/02/2015, 08:09

Pero pruebo desde mi servidor local y no veo una demostración del mensaje cargando por ello es que me dices que es sencillo pero de verdad no soy muy bueno con java entiendo un poco el CSS pero lo demás no por ello es que pido ayuda amigo sinceramente copiando y pegando como me participas solo es una página más sin el mensaje de cargando

SeaPirates · #8 (**permalink**) 19/02/2015, 05:59

Cita:

Iniciado por Flow89

Código Javascript:

Ver original<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 Preloader Animation </title>
<style type="text/css">
 
/* Full Width Progress Bar */
 
#preloader { 
    width:100%; 
    height:5px;  
    background:#000;
    top:50%;
    position:absolute;
}
 
.expand { 
    width:100%; 
    height:1px; 
    margin:2px 0; 
    background:#2187e7; 
    position:absolute;
    box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7);
    -moz-animation:fullexpand 2000ms cubic-bezier(1.000, 0.610, 0.970, 0.000); /* Set the duration of the animation */
    -webkit-animation:fullexpand 2000ms cubic-bezier(1.000, 0.610, 0.970, 0.000);
}
 
@-moz-keyframes fullexpand {
    0%  { width:0px;}
    100%{ width:100%;}  
}
@-webkit-keyframes fullexpand {
    0%  { width:0px;}
    100%{ width:100%;}  
}
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    var ua = $.browser; /* Create a variable for browser info */
    $('.container').hide(); /* Hide the content */
    
    /* If the Version or Firefox is < or = 5.0 the preloader not display, the same function applies to old Version Safari and Chrome and finally Opera and IE they don't support CSS3 Animation */
    if (ua.mozilla && ua.version <='5.0' || ua.safari && (navigator.appVersion.indexOf('3.') != -1) || ua.opera || ua.msie){
        /* If the condition is true the content will be displayed immediately */
        $('.container').show();
    }
    else { /* Otherwise appears the preloader */
        /* Insert the markup preloader usign jQuery */
        $('body').append('<div id="preloader"><span class="expand"></span></div>');
        /* The animation during 2sec, change the delay parameter to extend or decrase the animation, remember to change the duration of the animation also in CSS */
        $('#preloader').delay(2000).fadeOut('slow', function() {
        $('.container').fadeIn('fast');  
    });     
    }
});
</script>
</head>
<body>
<div class="container">
 aqui tu página
</div>
</body>
</html>

Con copiar y pegar basta, no puedo creer que te parezca complicado, simplemente parate a leerlo con detenimiento (traducelo si te hace falta) y verás como no solo entiendes ese ejemplo, si no que puedes llegar a crear uno propio.

Un saludo

Yo creo que influyen bastantes más factores, como las imágenes, y ficheros externos que debes cargar a aparte para que no tarde tanto.