Ciao, stai cercando di creare una barra di progressione per la lettura dei tuoi articoli? Sei nel posto giusto per poter capire come inserirla nel tuo sito web.

Cosa è la barra di progressione lettura ?

È semplicemente una barra di caricamento che trovi di solito in alto o in basso ad un articolo o pagina, che aumenta con l’avanzamento della lettura ( scroll ).

Proprio come quella che vedi su questo articolo in alto!

Perché dovrei averne una ?

In realtà non è niente di obbligatorio, ma una barra di progressione per la lettura, è un piccolo aiuto e un invito a scorrere la pagina fino in fondo e motiva il visitatore a leggere l’articolo fino in fondo.

Quindi oltre ad essere un’animazione carina, è anche un incentivo per l’utente a leggere tutto l’articolo e quindi restare più tempo sul sito web.

Sapevi che i visitatori di un sito impiegano solo un paio di secondi per decidere se rimanere sul sito o abbandonarlo ? È difficile mantenere alto l’interesse del lettore e catturare la sua attenzione, specialmente se si tratta di articoli lunghi.

Bene, quindi adesso che sappiamo i vantaggi di una barra di progressione lettura, possiamo scoprire come crearne una per il nostro sito web.

Barra di progressione lettura in codice

Qui ti spiegherò come creare la progress bar lettura in codice da inserire sul tuo sito web, se tu dovessi avere un sito in wordpress, potrai saltare questa parte e vedere il prossimo tutorial e i plugin da scaricare.

Vediamo subito il codice da inserire per il nostro sito web:

Il primo codice sarà in HTML e sarà semplicemente un”<div>” con una classe e un “ID” che sarà richiamato dal codice in Javascript

<div class="progressbarlettura" id="progressbarlettura"></div>

Come vedi sia la classe e sia l’ID hanno lo stesso nome per convenzione e per rendere tutto più semplice.

Supponiamo che hai un tag “article” dove all’interno hai tanti TAG  “p” e “h1 ” , bene ora quello che dobbiamo fare, sarà inserire quel codice HTML subito prima del TAG article, come in questo esempio:

<div class="progressbarlettura" id="progressbarlettura"></div>

<article>
	<h1>Titolo Articolo</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic doloribus nisi repellat officia voluptas, cum praesentium, temporibus distinctio quos. Facilis suscipit, consectetur labore optio quia beatae magni dolores iusto alias iste, in repellat adipisci aliquid cumque earum asperiores. Eligendi sint aperiam facilis quos</p>
</article>

Ora creiamo il foglio di stile CSS , e inseriamo il codice per la nostra progress bar :

.progressbarlettura {
    background: yellow;
    position: fixed;
    top: 0;
    bottom: auto;
    left: 0;
    width: 0%;
    height: 5px;
    z-index: 1000;
}

Come vedi il codice, creerà la Barra di progressione lettura di colore giallo, puoi cambiare colore inserendo il “codice colore” al posto di “yellow”.

Vediamo il codice in Javascrip da incorporare nel nostro sito web:

let prog = document.getElementById('progressbarlettura');

let body = document.body,
    html = document.documentElement;

let height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);

const setProgress = () => {
   let scrollFromTop = (document.documentElement.scrollTop || body.scrollTop) + html.clientHeight;
   let width = scrollFromTop / height * 100 + '%';

   console.log('scroll', html.clientHeight, body.scrollTop);

   prog.style.width = width;
}

window.addEventListener('scroll', setProgress);

setProgress();

Bene, adesso che avrai importato tutto, potrai vedere la tua barra di progressione lettura visibile e animata durante lo scorrimento del tuo articolo !

Barra di progressione lettura con WordPress

Vediamo come poter avere la nostra barra di progressione lettura in maniere davvero semplice, con l’utilizzo dei plugin per WordPress.

Il primo plugin che possiamo utilizzare è Worth the Read mentre il secondo è Reading Progressbar .

Possiamo utilizzare uno dei 2, sono davvero molto simili ed è possibile modificare il colore e lo stile della barra di caricamento in entrambi.

Se dovessi installare Worth the Read, troverai una volta attivato il plugin, la voce nel menù della tua Daschboard altrimenti con Reading Progressbar verrà aggiunta la voce nel menù delle impostazioni della Dashboard.

Worth The Road :

Reading Progressbar :

Forse Worth the Read è più completo, ma in realtà io punterei più su una scelta di compatibilità.

Prova ad installare uno dei due, se non ci dovessero essere errori e riesci a visualizzare tutte le immagini nei tuoi articoli, allora potrai tenerlo installato, altrimenti potrai utilizzare l’altro .

Che ne pensi ? È stato utile questo articolo ? 🙂

Lasciamo un commento se non vai troppo di fretta 😀