Trobber

Che cos'è un throbber?

Un throbber (dal termine inglese throbber - pulsazione, battito) è un elemento grafico animato che funge da indicatore di esecuzione di azioni in background, come il caricamento di contenuti, l'esecuzione di compiti o l'attuazione di comandi. Questo elemento può essere utilizzato su siti web, applicazioni o programmi informatici. Un esempio classico di throbber è un cerchio rotante che appare nel browser al posto del favicon, mentre si carica una nuova pagina web. Tali indicatori sono quasi sempre presenti nelle schede dei browser.

Caratteristiche del throbber

Il throbber, noto anche come indicatore di progresso asincrono, è una varietà di preloader. A differenza dell'indicatore di processo (barra di progresso), che mostra la percentuale di completamento o il tempo rimanente, il throbber dimostra solo che il processo di caricamento è in corso. Spesso ha contorni pulsanti, creando un effetto visivo che indica che il processo non è completato. Pertanto, il throbber è talvolta chiamato pulsante.

A cosa serve un throbber?

Il primo utilizzo del throbber risale all'inizio degli anni '90 nel browser web NCSA Mosaic, che ha gettato le basi per Internet Explorer. Gli sviluppatori hanno implementato un indicatore di attività pulsante per informare gli utenti che il browser stava lavorando e le pagine si stavano caricando. L'obiettivo principale del throbber è mostrare all'utente che il programma non si è bloccato, ma continua a svolgere azioni.

Funzioni aggiuntive

Oltre a informare sul processo di caricamento, il throbber migliora l'esperienza dell'utente con il sito o il programma. Durante il caricamento di contenuti, come stili, font e immagini, gli elementi possono caricarsi in modo irregolare. Il throbber nasconde questi momenti sgradevoli, in modo che l'utente non veda elementi vuoti o visualizzati in modo errato. Inoltre, il throbber può:

• Tenere gli utenti coinvolti attirando l'attenzione su un'animazione creativa.
• Distrarre dall'attesa creando l'illusione di un progresso rapido.
• Aumentare il riconoscimento del marchio utilizzando loghi o scritte uniche.

Dove si usa il throbber?

Il throbber appare nei casi in cui il caricamento del sito richiede più tempo del previsto o quando non c'è risposta dal server. Puoi vedere l'icona di caricamento nei seguenti luoghi:

• Nella scheda del sito nel browser.
• Nella barra di ricerca del browser.
• Su schermo durante il caricamento della pagina.
• Su elementi che si caricano lentamente, come immagini o video.
• In applicazioni mobili e programmi.

Il throbber può nascondere completamente la risorsa o consentire interazioni, ad esempio, annullare il caricamento o tornare alla homepage. Se la risorsa è completamente nascosta, l'utente deve semplicemente attendere il completamento del caricamento.

Varianti di presentazione del throbber

All'inizio del loro utilizzo nei browser web, i throbber avevano la forma di un logo animato del programma, e questo rimane un metodo popolare ancora oggi. Successivamente, è apparso e si è diffuso un'icona rotante a forma di anello, nota come spinner. Può essere visualizzato in vari stili, a seconda dell'identità aziendale e del design del sito.

I principali requisiti per l'animazione di caricamento sono la sua dinamicità. Le varianti più comuni di preloader includono:

• Punti lampeggianti a forma di cerchio.
• Simboli che cambiano nei programmi per console.
• GIF animate o animazioni CSS.

Come aggiungere un throbber al sito senza conoscenze di codice

Per implementare un'animazione di caricamento sul sito, non è necessario essere programmatori. Ci sono diversi modi semplici:

Servizi specializzati

Utilizza servizi online che consentono di creare o scaricare animazioni di caricamento e generare il codice per l'inserimento. Esempi di tali servizi:

• Costruttore di preloader di Hello-site.ru.
• Codepen.
• Loading.io.
• Svgator.
• CSS Loader Generator.

Dopo aver creato l'animazione, copia semplicemente il codice HTML o CSS ottenuto.

Plugin per WordPress

Per i siti su WordPress sono disponibili plugin speciali, come LoftLoader, WP Smart Preloader o "Preloader". Dopo aver installato e attivato il plugin, basta scegliere il design desiderato e configurare l'elemento.

Funzioni integrate dei costruttori di siti

In alcuni costruttori di siti sono presenti funzioni integrate per aggiungere un throbber o un'animazione di caricamento. Ad esempio, in Tilda puoi utilizzare l'elemento "microanimazione", aggiungendo il blocco "T228" in cima alla pagina.