Realizato da

Pubblicato il

barra

scroll

avanzamento

js

html


come creare barra avanzamento progresso di scroll con html e javascript

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 1
    scroll_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 percentuale
    barra.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.

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)