Barra di caricamento in Javascript
- Gennaio 28, 2010
- by
- Donatantonio
Spesso può essere utile presentare agli utenti di un sito una barra di caricamento la cui funzionalità, nella maggior parte dei casi, è prettamente grafica. Ad esempio prima di effettuare un’operazione, all’utente può essere presentata una barra di caricamento che si completa in funzione di un timer alla cui conclusione effettua la particolare operazione.
Andremo a descrivere da prima il codice Javascript:
function countdown(){
var ora = parseFloat(document.rovescia.conto.value);
ora = ora + 0.5;
document.rovescia.conto.value=ora;
var g_c = ora*3;
document.getElementById("barra").innerHTML="<div style='height:10px; width:"+g_c+"px; background-color:#FF0000'></div>";
if(ora==60){
location.href = "reindirizzamento.html";
}
conto = setTimeout("countdown()",500);
}
Utilizzeremo un contatore immagazzinato in un input hidden che chiameremo “conto”. Viceversa un altro blocco che chiameremo “barra” conterrà l’avanzamento del caricamento. Dopo 60 secondi la barra di caricamento sarà completata.
L’aspetto grafico della barra verrà implementata con un semplice DIV e un minimo di CSS.
Ora vediamo lo script inserito in una pagina html:
<html>
<head>
<title>Pagina di reindirizzamento</title>
<script type="text/javascript">
function countdown(){
var ora = parseFloat(document.rovescia.conto.value);
ora = ora + 0.5;
document.rovescia.conto.value=ora;
var g_c = ora*3;
document.getElementById("barra").innerHTML="<div style='height:10px; width:"+g_c+"px; background-color:#FF0000'></div>";
if(ora==60){
location.href = "reindirizzamento.html";
}
conto = setTimeout("countdown()",500);
}
</script>
</head>
<body>
Stai per essere reindirizzato alla pagina corretta...
<br/>
<form name='rovescia' action='#'>
<input type='hidden' name='conto' value='0'/>
</form>
<div class='barra' id='barra' style='border:1px solid #000000; width:180px;'>
<script type="text/javascript">
countdown();
</script>
</body>
</html>
Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.
