PRELOADER
Progetto FREE
Un preloader è un elemento visivo (come un'animazione, una barra di caricamento, o un'icona rotante) che viene mostrato agli utenti mentre una pagina web, un'applicazione, o una risorsa multimediale si carica in background. Ecco le sue principali funzioni:
1. Migliorare l'esperienza utente (UX):
- Feedback visivo: Informa l'utente che il caricamento è in corso, evitando che pensino che il sito non funzioni.
- Riduzione della percezione del tempo: Un'animazione accattivante può far sembrare il tempo di caricamento più breve.
2. Mascherare tempi di caricamento lunghi:
- I preloader nascondono i contenuti incompleti o non pronti, offrendo un'interfaccia più professionale.
- Impedisce che l'utente veda elementi del sito scomposti o caricati in modo asincrono (es. testo senza immagini o layout incompleti).
3. Creare un impatto estetico:
- Può rafforzare l'identità visiva del brand attraverso animazioni personalizzate che includono il logo o elementi distintivi.
4. Migliorare la funzionalità tecnica:
- In applicazioni web complesse, il preloader può essere usato per inizializzare funzionalità o caricare dati necessari prima che l'utente interagisca con la pagina.
Quando usarlo?
- Quando un sito o un'app ha un tempo di caricamento superiore a 2-3 secondi.
- In siti che caricano risorse pesanti, come immagini ad alta risoluzione, grafici complessi o contenuti multimediali.
- In applicazioni single-page (SPA) che richiedono una maggiore elaborazione iniziale.
Consigli:
- Non esagerare con l'animazione: un preloader troppo lungo o invadente può frustrare gli utenti.
- Fai in modo che il preloader sia visibile solo per il tempo necessario; una durata eccessiva può sembrare un bug o un problema di prestazioni.
- Offri alternative, come messaggi o link, per situazioni in cui il caricamento fallisce.
MATERIALE OCCORRENTE
- Una immagine giff molto leggera che funga da preloader misure 200x200
- Inserimento di codice extra
DIFFICOLTA' : Minima.
STEEP 1
Scarica la tua immagine preloader sul tuo pc. In rete se ne trova una miriade oppure utilizza questa che ti ho inserito per il tuo test ▲.
Carica l'immagine nella cartella IMAGES del tuo sito web
Carica l'immagine nella cartella IMAGES del tuo sito web
STEEP 2
INSERIMENTO CODICE EXTRA
Per default questo codice andrebbe inserito al passo 1 poi su statistiche codice - DOPO L'APERTURA DEL TAG BODY. In questo esempio lo metteremo direttamente sulla pagina che andremo a caricare ma ricordatevi di inserirlo come versione definitiva in ► statistiche e codice.
Ecco il codice da inserire ▼
ATTENZIONE: in neretto il patch da cambiare con il vostro, in rosso il nome del file giff da cambiare con il vostro.
CODICE INSERISCI PRIMA DELLA CHIUSURA DEL TAG HEAD | ||
<!-- Start Loader by max--> <div id="loader" style=" position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,1); z-index: 2000; display: flex; /* Per centrare il contenuto */ align-items: center; /* Centra verticalmente */ justify-content: center; /* Centra orizzontalmente */ "> <div id="custom_loader" style=" width: 200px; /* Regola dimensioni */ height: 200px; background-color: rgba(0,0,0,0); /* Trasparente per mostrare solo l'immagine */ border-radius: 10%; z-index: 2000; "> <p> <img src="https://www.templatewebdesign.it/ images/ldwebdesign.gif" width="200" height="200" alt="Loading..." /> </p> </div> </div> <script> // Nascondi la barra di scorrimento document.body.style.overflow = "hidden"; // Funzione per nascondere il loader e ripristinare lo scroll function close_loader() { document.getElementById("loader").style.display = "none"; // Nasconde il loader document.body.style.overflow = "auto"; // Ripristina lo scroll } // Nascondi il loader e riabilita lo scroll al caricamento della pagina window.onload = function() { setTimeout(close_loader, 1500); // Chiudi il loader dopo 1500ms }; </script> |
COMMENTA ▼
Non sono presenti ancora recensioni.