Realizzare un “loader” in puro CSS3
Il web moderno è sempre più ricco di navigazione “on the page”, senza ricaricamenti della pagina, con funzioni ajax che ricaricano parte dei contenuti o eseguono operazioni lato server, ed è ormai naturale per l’utente vedere delle immagini che rappresentano un tempo di attesa ..i “Loader”
Durante le chiamate ajax che eseguono operazioni (sincrone o asincrone) sul server, molto spesso i ritardo dovuto all’esecuzione del codice può essere troppo lungo e una non adeguata copertura di questi tempi da la sensazione all’utente che sulla pagina non stia avvenendo nulla. Così magari si è portati a cliccare nuovamente un bottone e ciò, oltre a non rappresentare una buona user experience, può causare problemi tecnici come duplicati di salvataggi nei Database o esecuzioni multiple di funzioni che possono creare seri problemi.
Per una migliore “user experience” è opportuno accompagnare ( senza esagerare ) le transizioni e i tempi di latenza con degli elementi che hanno appunto un duplice scopo:
-notificare all’utente che sulla pagina sta avvenendo qualcosa
-impedire eventi inattesi da parte dell’utente ( click multipli.. )
A questo scopo esistono molte possibilità di utilizzo di “loader”, alcuni integrati in framework (Kendo UI o jQueryUI ad esempio o anche Sonic JS che abbiamo usato con ottimi risultati in passato). I loader sono molto spesso delle immagini in formato .gif animate come queste:
Vediamo invece come costruire un LOADER CSS3 in maniera molto semplice.
Una soluzione “portabile” in qualunque progetto è quella di realizzare un loader in puro CSS3, come nell’esempio qui sotto realizzato:
Il codice HTML:
|
1 2 3 4 5 |
<div class="container _loader"> <div class="clear-loading loading-effect-2"> <span></span> </div> </div> |
IL CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
._loader{ background: #3498DB; color: #fff; text-align:center; padding:30px 0; } .container { width: 100%; max-width: 1200px; margin: 0 auto; } /* Loading wrapper */ .clear-loading { text-align: center; margin: 0 20px; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; display: inline-block; } /* Effetto loader*/ .loading-effect-2 { width: 100px; height: 100px; } .loading-effect-2 > span, .loading-effect-2 > span:before, .loading-effect-2 > span:after { content: ""; display: block; border-radius: 50%; border: 2px solid #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .loading-effect-2 > span { width: 100%; height: 100%; top: 0; left: 0; border-left-color: transparent; -webkit-animation: effect-2 2s infinite linear; -moz-animation: effect-2 2s infinite linear; -ms-animation: effect-2 2s infinite linear; -o-animation: effect-2 2s infinite linear; animation: effect-2 2s infinite linear; } .loading-effect-2 > span:before { width: 75%; height: 75%; border-right-color: transparent; } .loading-effect-2 > span:after { width: 50%; height: 50%; border-bottom-color: transparent; } @-webkit-keyframes effect-2 { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes effect-2 { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } |
