Realizzazione Siti e Portali Web – Wordpress CODING – Mobile APP – Consulenze SEO – Web design – Ecommerce     Login / Register

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:

IL CSS:

Related posts

Leave a Comment

Lascia un commento

Your email address will not be published.




Top