Tema: Cómo hacer un preloader
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 30/07/2010, 09:40
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 8 meses
Puntos: 20
Respuesta: Cómo hacer un preloader
Qué opináis de esta forma?

Es funcional

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <style type="text/css"> 
  6.     body, h1 {
  7.         font-family: Verdana, Arial, Helvetica, sans-serif; 
  8.         font-size: 0.8em;
  9.     }
  10.     a {
  11.         text-decoration: none;  
  12.         color: #333;
  13.     }
  14.     a:hover {
  15.         color: #ff0000;
  16.     }
  17.     
  18.     #ajax-content {
  19.         height: auto; 
  20.         width: 400px;
  21.         border: 5px solid #ccc; 
  22.         margin: 0 auto; 
  23.         padding: 10px;
  24.     }
  25.     #loading {
  26.         width: 66px; 
  27.         margin: 0 auto;
  28.     }
  29. </style>
  30. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  31.  
  32.  
  33. <script>
  34. $(document).ready(function(){
  35.     $("#loading").css("display", "none");
  36.     $("#ajax-content").css("display", "none");
  37.     $("#enlaceajax").click(function(evento){
  38.       evento.preventDefault();
  39.       $("#loading").css("display", "inline");
  40.       $("#ajax-content").css("display", "none");
  41.       $("#ajax-content").load("test.php", function(){
  42.          $("#loading").css("display", "none");
  43.          $("#ajax-content").css("display", "block");
  44.       });
  45.    });
  46. })
  47. </script>
  48. <title>PRELOADER 2</title>
  49. </head>
  50.  
  51. <body>
  52. <a href="#" id="enlaceajax">Haz clic!</a>
  53.         <div id="loading">
  54.             <img src="generator.php.gif" alt="content is loading" width="100" height="100" />
  55.         </div>
  56.         
  57.         <div id="ajax-content"></div>
  58. </body>
  59. </html>