Ciao a tutti e benvenuti in questa guida su come creare una bara di caricamento o progresso. Lo scopo di questa barra è quello di mostrare un progresso (in percentuale) dello scroll di una pagina web. Se non siete interessati alla spiegazione del codice, potete semplicemente scaricare il codice da questa pagina o dalla repository su GitHub di devnews.it.
In questa guida andremo ad implementare la barra usando del codice un puro JavaScript, senza dover far uso di un plugin come JQuery.
Ecco un esempio della barra di avanzamento scroll che andremo a creare oggi. Cliccate sulla tab Result e provate a scrollare in fondo alla pagina. Vedrete che la barra vi mostrerà il progresso di scroll.
Vediamo il codice HTML per creare la barra di caricamento.
<!DOCTYPE html> <html> <head> <title>Esempio barra di progresso in HTML e JS</title></head> <body><div id="barra-progresso"></div><h1>Una pagina scrollabile</h1><h2>Fine pagina</h2><script type="text/javascript" src="app.js"></script> </body></html>
L’unica porzione di codice in cui siamo interessati è il div con classe barra-progresso. Utilizzeremo questo div per mostrare il progresso dello scroll tramite una manipolazione della sua proprietà CSS width. Il resto del codice serve solamente per dare stile alla pagina.
Come aggiornare una barra del progresso con JavaScript
Ora che abbiamo il codice HTML necessario per rappresentare una barra di caricamento, possiamo vedere il codice JS, necessario per spostare la barra. Questo codice ha le seguenti funzioni:
- Ottenere l’altezza totale della pagina.
- Ottenere l’altezza attuale dello scroll.
- Ottenere il progresso dello scroll della pagina in percentuale.
- Aggiornare la regola CSS width della barra per cambiare la sua larghezza
Ecco il codice JS commentato:
// creiamo delle reference ai tag <body> e <html> var body = document.body, html = document.documentElement; // otteniamo l'altezza totale della pagina var height = Math.max( body.scrollHeight, body.offsetHeight,html.clientHeight, html.scrollHeight, html.offsetHeight ); // sottraiamo all'altezza della pagina, l'altezza della finestra height-=window.innerHeight; // funzione per spostare la barra di caricamento var update = function(){// dividendo l'altezza corrent per l'altezza totoale otteniamo un numero tra 0 e 1scroll_ratio = document.documentElement.scrollTop/ height;// reference al tag <div id="barra-progresso">var barra = document.getElementById('barra-progresso');// molitpiclichiamo il numero per 100 per ottenere un numerto tra 0 e 100// usiamo questo numero per cambiare la proprietà width della barra in percentualebarra.style.width = scroll_ratio*100 + "%"; } // chiamiamo la funzione update quando la pagina è caricata update(); // chiamiamo la funzione update quando l'user esegue uno scroll con il mouse window.onscroll = function() {update(); };
La parte più importante di questo codice è decisamente la variabile scroll_ratio.
Questa variabile è ottenuta dividendo l’altezza attuale per l’altezza totale. In questo modo
otterremo un numero tra 0 ed 1. Per ottenere il progresso di scroll in percentuale basta
semplicemente moltiplicare questo numero per 100.
In questo caso abbiamo creato la barra in maniera orizzontale, ma una volta ottenuta la percentuale possiamo utilizzare questo numero nel modo in cui vogliamo. Per esempio possiamo creare una barra di progresso verticale, mostrare il progresso di scroll semplicemente come un numero o anche mostrare il progresso sotto forma di un grafico a torta.
Ci siamo ora sapete come creare una barra di caricamento o progresso di scroll usando semplicemente del codice HTML e JavaScript.
