jQuery: caricamento Flash

Con jQuery è possibile creare un effetto di caricamento in stile Flash con relativa semplicità. Gli elementi necessari per realizzare questo effetto sono due: un elemento vuoto con larghezza pari a zero e un timer JavaScript che andrà ad incrementare tale larghezza finchè l'elemento non raggiunge la dimensione massima del suo contenitore. Inoltre vogliamo anche creare l'effetto di una sovrapposizione di un colore di sfondo che scomparirà quando il caricamento sarà ultimato. Per far ciò useremo un elemento vuoto creato con jQuery. Vediamo l'implementazione di questo effetto.

Partiamo dalla marcatura che creeremo con jQuery:


<body>
<div id="overlay" />

<div id="loader">

  <span />

</div>
</body>

Continuiamo con i nostri stili CSS, davvero semplici:


html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	min-height: 100%;
}
 
body {
	position: relative;
}
 
#overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #444;
}
 
#loader {
	width: 200px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -80px;
	background: #fff;
}
 
#loader span {
	width: 0px;
	display: block;
	height: 40px;
	background: url(bg.png) repeat-x;
}

Sia l'elemento di overlay che la barra di caricamento sono stati posizionati in modo assoluto sulla pagina. Così facendo i due elementi si posizioneranno uno sopra l'altro e potranno essere rimossi all'occorrenza con più facilità.

Con jQuery dobbiamo innanzitutto creare la marcatura, inserirla e quindi nasconderla:


$('<div id="overlay"/>').css('opacity', '0.5').
appendTo('body').hide();
$('<div id="loader"/>').appendTo('body').hide();
$('<span/>').appendTo('#loader');

Prima di creare l'effetto vero e proprio usiamo la funzione setTimeout() per ritardare la comparsa della barra di caricamento:


setTimeout(function() {
  
     $('#overlay, #loader').show();
     
     var counter = 0;
     
     var interval = setInterval(function() {
     
       counter++;
       
       if(counter == 10) {
       
         clearInterval(interval);
         $('#overlay, #loader').hide();
         $('span', '#loader').css('width', '0px');
       
       
       }
       
       $('span', '#loader').animate({
         width: '+=20px'
       });
       
      
     
     }, 500);
  
  
}, 50);

Sia l'elemento di overlay che la barra di caricamento vengono fatti apparire insieme. A questo punto creiamo un timer che andrà ad incrementare la larghezza dell'elemento span all'interno della barra di caricamento. Il fattore di incremento è di 20 pixel. Dato che la barra è larga 200 pixel, il contatore interno del timer dovrà raggiungere il valore 10 per poter essere fermato. Quindi sia l'elemento di overlay che la barra di caricamento vengono nascosti e la larghezza dell'elemento span viene nuovamente impostata su 0.

Potete visualizzare il risultato finale in questa pagina.

Torna su