Realizzare una barra di caricamento con JavaScript (ma senza jQuery) richiede semplicemente la modifica ripetuta nel tempo della larghezza di un elemento. La ripetizione avverrà tramite un timer ciclico. Vediamo insieme i dettagli.
Partiamo da questa struttura HTML:
<div id="container">
<div id="bar"></div>
</div>
<div id="message"></div>
bar sarà l'elemento di cui modificheremo la larghezza e message informerà l'utente della percentuale completata. Ecco gli stili CSS:
#container {
width: 500px;
height: 50px;
background: silver;
overflow: hidden;
text-align: right;
}
#bar {
width: 0px;
height: 50px;
background: orange;
}
Il codice JavaScript semplicemente incrementa un contatore che andrà a impostare la larghezza ogni volta che il timer si ripete. Quando il contatore avrà raggiunto la larghezza del contenitore, il timer verrà fermato. Allo stesso tempo ogni volta che il contatore raggiunge un determinato valore (10, 20 eccetera) verrà mostrato un messaggio sullo stato di avanzamento:
window.onload = function() {
var Animator = new function() {
var parent = document.getElementById('container');
var element = document.getElementById('bar');
var target = document.getElementById('message');
this.run = function() {
var i = 0;
var width = 0;
var timer = setTimeout(function() {
i += 1;
element.style.width = width + i + 'px';
setTimeout(arguments.callee, 25);
if(i == 50 ) {
target.innerHTML = '10% completed';
}
if(i == 100 ) {
target.innerHTML = '20% completed';
}
if(i == 150 ) {
target.innerHTML = '30% completed';
}
if(i == 200 ) {
target.innerHTML = '40% completed';
}
if(i == 250 ) {
target.innerHTML = '50% completed';
}
if(i == 300 ) {
target.innerHTML = '60% completed';
}
if(i == 350 ) {
target.innerHTML = '70% completed';
}
if(i == 400 ) {
target.innerHTML = '80% completed';
}
if(i == 450) {
target.innerHTML = '90% completed';
}
if(i == 500) {
target.innerHTML = '100% completed';
clearTimeout(timer);
}
}, 25);
};
};
Animator.run();
};
Potete visionare l'esempio finale in questa pagina.