Grazie a questo strumento inoltre, potrai impedire che una persona che ha già cliccato sul classico tasto Invia di un form, non clicchi nuovamente perchè stufo dell'attesa, evitando così l'inserimento di record doppi.
Vediamo dunque come creare un loader html css che parta con una azione specifica dell'utente, che sia il submit di un form o anche il click su un link html.
Come creare un loader html css al caricamento della pagina
Tutto quello di cui abbiamo bisogno per generare il classico loader è in teoria solo un po' di codice html e css.
Tuttavia, nell'esempio che sto per spiegare, la chiamata al loader verrà fatta tramite javascript, e non quindi definita a livello generale come classe nei fogli di stile per tutti i link.
Partiamo dall'animazione css da includere in una pagina html, ecco i fogli di stile che si possono utilizzare per avere l'animazione di un cerchio roteante:
<style>
.guscioloader
{
font-size: 1.6em;
color: #1E6FA4;
font-weight: bold;
display:none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #CCCCCC;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
text-align:center;
align-items:center;
justify-content:center;
}
.loader
{
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 150px;
height: 150px;
animation: spin 2s linear infinite;
}
@keyframes spin
{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
Abbiamo un guscio div chiamato guscioloader, che conterrà il nostro loading, come una sorta di layer sfondo colorato semi trasparente che ricopre tutta la pagina con lo scopo di bloccare l'intera pagina web.
Poi abbiamo il loader, che conterrà di fatto l'elemento grafico animato con i keyframes, che in questo caso è una sorta di sfera con bordo azzurro che ruota.
Venendo invece al javascript da utilizzare, c'è la funzione che serve per chiamare il nostro div di caricamento in corso:
<script language="JavaScript">
function loader()
{
document.getElementById("guscioloader").style.display="flex";
}
</script>
Che in html va richiamato semplicemente così:
<a href="" onclick="loader();">carica la pagina</a>
Oppure nel caso di un form:
<form method="pos\" action="" onsubmit="return loader();">
Quando un utente cliccherà su quel link dunque, apparirà il nostro div loader, che scomparirà non appena la pagina chiamata verrà caricata.
Ecco il codice completo di quanto appena illustrato:
<html>
<head>
<title>Loader html</title>
<style>
.guscioloader
{
font-size: 1.6em;
color: #1E6FA4;
font-weight: bold;
display:none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #CCCCCC;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
text-align:center;
align-items:center;
justify-content:center;
}
.loader
{
border: 16px solid #f3f3f3;
border-top: 16px solid #3498db;
border-radius: 50%;
width: 150px;
height: 150px;
animation: spin 2s linear infinite;
}
@keyframes spin
{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<script language="JavaScript">
function loader()
{
document.getElementById("guscioloader").style.display="flex";
}
</script>
</head>
<body>
<div id="guscioloader" class="guscioloader"><div class="loader"></div><br /> Loading...</div>
<a href="" onclick="loader();">carica la pagina</a>
</body>
</html>
Come si può ben vedere da queste righe di codice, è stato possibile creare un'animazione di pagina in caricamento senza l'uso di alcuna immagine, solo grazie al potere dei css... e dell'html... e del javascript :p
Ovviamente questo è solo un esempio, ed è la punta dell'iceberg sull'argomento, dato che con le animazioni html/css è possibile creare qualsiasi tipo di grafica ed effetto speciale da piazzare al caricamento della pagina.
1 commenti so far
no... c'era un errore di posizionamento del codice da parte mia, ora funziona bene, solo che se non trova l'indirizzo specificato nell "href" il loader, non si ferma piu'! ci vorrebbe una condizione di stop nel javascript
Lascia un commento!