Aggiungi un'animazione di caricamento al tuo sito Web WordPress (10 diverse opzioni)

Tutti sono sempre di fretta e un sito web che impiega più di 2 o 3 secondi per caricarsi è percepito come "troppo lento". Per fortuna, c'è un modo per aggirare momentaneamente quel panico e mantenere gli utenti su un sito abbastanza a lungo da caricare le cose. Sto parlando dell'animazione di caricamento perfettamente ipnotica.

In questo post, vedremo cos'è esattamente un'animazione di caricamento, qual è il loro scopo e come aggiungerne una a qualsiasi sito WordPress, inclusi i tuoi siti Divi.

Che cos'è un'animazione di caricamento?

Un'animazione di caricamento, chiamata anche pre-loader, è un'animazione accattivante che viene visualizzata su un sito Web abbastanza a lungo da consentire il caricamento di tutti gli elementi. Alcune animazioni di caricamento sono brevi e non necessitano di mantenere l'attenzione dell'utente per molto tempo. Ma in alcuni casi, se il sito è molto grande, l'animazione di caricamento deve essere davvero accattivante per consentire all'utente di restare.

Se sei in giro da abbastanza tempo, sai che il caricamento delle animazioni è apparso dagli anni '90. Anche all'inizio dell'era di Internet, avevamo animazioni di caricamento. Ovviamente a quei tempi potevano durare molto più a lungo di quanto non facciano adesso. Inoltre, abbiamo imparato a renderli molto più divertenti per l'utente senza annoiarli e allontanarsi.

Acquisire familiarità con il caricamento delle animazioni

Lo stile più comune di caricamento delle animazioni è il cerchio rotante. Da non confondere con il "cerchio arcobaleno della morte" dei computer Apple. L'animazione di caricamento del cerchio rotante ha un movimento a gradiente sfalsato. I primi pre-caricatori rotanti avevano molte versioni diverse, dai fiori, ai cerchi, ai fiocchi di neve e persino agli ying yang rotanti. Al giorno d'oggi le animazioni di caricamento rotante sono più dinamiche e più belle da guardare.

Le animazioni di caricamento a rotazione funzionano solo se il tempo di attesa è breve. Più di 5 secondi sono già troppi. Questo è il momento in cui gli sviluppatori devono utilizzare preloader più creativi. Un'animazione di caricamento divertente e divertente manterrà un utente sul sito, non importa quanto tempo ci vorrà.

Suggerimenti per un migliore caricamento delle animazioni

Ci sono alcune cose che puoi aggiungere alla tua animazione di caricamento per renderla più interessante di una semplice immagine in movimento. Ecco alcuni suggerimenti per renderli ancora migliori ed efficaci.

• Includi una barra percentuale
• Mostra quanto tempo deve aspettare ancora l'utente
• Spiega cosa sta succedendo sotto il cofano (sostegni per usare l'umorismo)
• Usa un'animazione divertente che non ripete necessariamente la stessa identica azione

I vantaggi di un'animazione di caricamento brandizzata

Se hai l'opportunità di creare la tua animazione di caricamento o utilizzare un plug-in con opzioni di personalizzazione, assicurati che il preloader sia brandizzato. Potrebbe essere semplice come utilizzare i colori del sito Web del marchio o utilizzare effettivamente un'illustrazione aziendale. L'idea alla base del branding di un'animazione di caricamento è che sembra appartenere a quel sito e non è solo un componente aggiuntivo. Questo riepilogo sul sito Web di Awwwards può ispirare le tue creazioni.

Come aggiungere un'animazione di caricamento al tuo sito WordPress

L'aggiunta di un'animazione di caricamento è più semplice di quanto si possa pensare. Ci sono una serie di opzioni su come aggiungerne uno a un sito WordPress. Dai plugin facili da usare all'aggiunta di codice personalizzato al sito. Poiché ci sono così tante scelte diverse, le elencherò qui in modo che tu possa dare un'occhiata in giro e trovare quella che funziona meglio per te.

Utilizzo di un plug-in per aggiungere un'animazione di caricamento

Un plugin è il modo più semplice e diretto per aggiungere un'animazione di caricamento. Questi sono particolarmente utili se non ti senti a tuo agio con il codice o non hai tempo. Ecco un elenco di alcuni dei plugin più versatili per il caricamento delle animazioni. Alcuni di questi sono gratuiti e altri sono premium. In alcuni casi, lo stesso plugin ha una versione gratuita più semplice e una versione pro più robusta.

Loftloader

Loftloader ha una versione gratuita e una pro. Nella versione gratuita puoi provare alcuni dei proloader e personalizzarli in modo che corrispondano al sito e al marchio. La versione pro ha più opzioni e controlli più granulari.

Precaricatore piatto

Flat Preloader è un semplice plugin gratuito con un set limitato di animazioni di caricamento colorate. Questo plugin è perfetto se hai bisogno di una soluzione rapida per un preloader e non hai bisogno di personalizzare i colori o l'immagine.

Miglior Preloader

Best Preloader è un plug-in di caricamento di animazione gratuito con un'opzione che si adatta a qualsiasi stile di sito web. Viene fornito con un'animazione con alcuni controlli di personalizzazione.

Caricatore di pagine

Page Loader è un plug-in di animazione di caricamento premium con molte opzioni di personalizzazione e branding. È uno dei plug-in pre-loader preferiti sul mercato.

WP Smart Preloader

WP Smart Preloader è un plug-in gratuito e open source con opzioni di personalizzazione complete. Le animazioni non sono molto elaborate ma si adatteranno a qualsiasi stile di sito web. Puoi personalizzare i colori e le impostazioni abbastanza facilmente.

Aggiungere un'animazione di caricamento senza un plugin

Se vuoi evitare di utilizzare un plug-in, sono disponibili molte animazioni di caricamento gratuite e pronte all'uso. Oltre ad alcuni tutorial avanzati che forniscono i frammenti di codice che devi aggiungere.

PixelBuddha con Multimedia:

I ragazzi di Multimedia hanno pubblicato un semplice tutorial con due set gratuiti di caricamento di animazioni da PixelBuddha e il codice necessario per impostarli sul tuo sito.

CodicePen:

In questo articolo Medium di UX Planet, l'autore raccoglie molte animazioni di caricamento in diversi stili. Ce ne sono di semplici e di più complessi. La maggior parte di essi è incorporata da CodePen e puoi ottenere lo snippet HTML e CSS dal widget stesso. Dovrai inserirli in un set di codici completo per l'impostazione di un'animazione di caricamento.

SpinKit:

Tobias Ashlink ha uno SpinKit con una bella raccolta di animazioni di caricamento con il codice disponibile tramite GitHub. Anche questi devono essere aggiunti a un set di codici completo per una configurazione pre-caricatore.

Caricamento.io:

Loading.io è una raccolta di animazioni di caricamento con molte opzioni diverse. Ci sono preloader CSS, preloader GIF, pulsanti e altro. Sfoglia il loro sito per trovare tutte le opzioni e le istruzioni su come aggiungerli al tuo sito.

Pixelvar:

I ragazzi di Pixelvars hanno scritto un pratico tutorial con tutto il codice necessario per impostare la propria animazione di caricamento. Puoi persino usare il loro codice insieme alle animazioni CodePen o GitHub sopra. Questa opzione sembra un po' più avanzata per alcune persone. Vai con questo se sei uno sviluppatore con una buona conoscenza della programmazione.

Con così tante opzioni, quale sceglierai?

Aggiungere un'animazione di caricamento a un sito Web WordPress è facile. Con così tante diverse opzioni disponibili, è solo questione di sceglierne una.

In questo post, ti abbiamo mostrato molti modi diversi per aggiungere un'animazione di caricamento al tuo sito. Qual è il tuo metodo preferito? Progettato su misura e aggiunto con codice a un tema figlio? Un plugin personalizzabile? Un'opzione semplice e senza fronzoli? Faccelo sapere nei commenti in modo che possiamo controllare le tue animazioni di caricamento.

Immagine in primo piano tramite muchomoros / shutterstock.com