Tema: preloader para mi Página Web
Ver Mensaje Individual
  #8 (permalink)  
Antiguo 19/02/2015, 05:59
SeaPirates
 
Fecha de Ingreso: enero-2009
Ubicación: España
Mensajes: 786
Antigüedad: 15 años, 10 meses
Puntos: 9
Respuesta: preloader para mi Página Web
Cita:
Iniciado por Flow89 Ver Mensaje
Código Javascript: 
Ver original
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>CSS3 Preloader Animation </title>
  6. <style type="text/css">
  7.  
  8. /* Full Width Progress Bar */
  9.  
  10. #preloader { 
  11.     width:100%; 
  12.     height:5px;  
  13.     background:#000;
  14.     top:50%;
  15.     position:absolute;
  16. }
  17.  
  18. .expand { 
  19.     width:100%; 
  20.     height:1px; 
  21.     margin:2px 0; 
  22.     background:#2187e7; 
  23.     position:absolute;
  24.     box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7);
  25.     -moz-animation:fullexpand 2000ms cubic-bezier(1.000, 0.610, 0.970, 0.000); /* Set the duration of the animation */
  26.     -webkit-animation:fullexpand 2000ms cubic-bezier(1.000, 0.610, 0.970, 0.000);
  27. }
  28.  
  29. @-moz-keyframes fullexpand {
  30.     0%  { width:0px;}
  31.     100%{ width:100%;}  
  32. }
  33. @-webkit-keyframes fullexpand {
  34.     0%  { width:0px;}
  35.     100%{ width:100%;}  
  36. }
  37. </style>
  38. <script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
  39. <script>
  40. $(document).ready(function(){
  41.     var ua = $.browser; /* Create a variable for browser info */
  42.     $('.container').hide(); /* Hide the content */
  43.     
  44.     /* 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 */
  45.     if (ua.mozilla && ua.version <='5.0' || ua.safari && (navigator.appVersion.indexOf('3.') != -1) || ua.opera || ua.msie){
  46.         /* If the condition is true the content will be displayed immediately */
  47.         $('.container').show();
  48.     }
  49.     else { /* Otherwise appears the preloader */
  50.         /* Insert the markup preloader usign jQuery */
  51.         $('body').append('<div id="preloader"><span class="expand"></span></div>');
  52.         /* 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 */
  53.         $('#preloader').delay(2000).fadeOut('slow', function() {
  54.         $('.container').fadeIn('fast');  
  55.     });     
  56.     }
  57. });
  58. </script>
  59. </head>
  60. <body>
  61. <div class="container">
  62.  aqui tu página
  63. </div>
  64. </body>
  65. </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.