⏳ 4 Migliori plugin per barre di avanzamento per WordPress 2026 (gratuiti e a pagamento)

Un lettore apre una pagina, vede un muro infinito di testo e se ne va. Non perché il contenuto sia scadente. Il cervello ha bisogno di un riferimento visivo: quanto manca alla fine, a che punto sono. Una barra di avanzamento risolve questo problema grazie alla pura psicologia della percezione.

Ma scegliere un plugin per questo compito è tutta un'altra storia. Uno è pensato per le barre di competenza nei portfolio, un altro per un preloader a schermo intero, un terzo si maschera da blocco Gutenberg. Se sbagli, ti ritrovi un costruttore di siti ipertrofico per una striscia minuscola.

Ecco quattro plugin per barre di avanzamento WordPress collaudati per il 2026. Gratuiti e a pagamento, basati su shortcode e su blocchi, ciascuno per il proprio scenario.

💡 Panoramica rapida:

• Definisci dove ti serve una barra di avanzamento: indicatore di lettura, barra di competenza, preloader o blocco Gutenberg, la scelta del plugin dipende da questo.
• Per barre di competenza e portfolio, prendi Progress Bar & Skill Bar: gratuito, leggero, 34 design nella versione Pro.
• Se ti serve un builder visuale con barre circolari, lineari e verticali senza dipendere dagli shortcode, StichyX Bar con anteprima live e grafica SVG.
• Per chi usa Gutenberg, Ultimate Blocks: barra di avanzamento come blocco nativo dell'editor più altri 35 blocchi nel pacchetto.
• Per un preloader con schermata iniziale animata, PageLoader, pagamento una tantum $26.

Tabella comparativa dei plugin

1. Progress Bar & Skill Bar

Un plugin di WpShopMart per chi ha bisogno di "mostrare competenze in percentuale" senza dipendenze superflue. Installa, attiva, genera uno shortcode e la barra è già sulla pagina. Niente editor a blocchi, niente interfaccia di costruzione: entri, imposti colori e percentuali, copi [PROGRESSBAR_WP id=xx].

La versione gratuita ha due design: circolare e lineare. Entrambi sono animati, la barra si riempie di colore da 0 al valore specificato durante lo scroll. Sotto il cofano c'è una griglia Bootstrap, quindi la responsività su mobile, tablet e desktop funziona senza configurazioni aggiuntive.

La versione Pro a $8 (Personale, 1 sito) o $24 (Business, illimitati) espande la libreria a 34 template e aggiunge l'ordinamento drag-and-drop degli elementi. C'è un grafico a semicerchio, un grafico semicircolare, sfondi sezionali, font ottimizzati e barre di competenza illimitate per pagina.

Pro:

• La versione gratuita è completamente funzionale, nessuna limitazione artificiale.
• Lo shortcode si inserisce ovunque: in un articolo, widget, tema.
• 52 recensioni su WordPress.org con una valutazione media di 4,5.
• Basato su Bootstrap, non entra in conflitto con la maggior parte dei temi.

Contro:

• Non aggiornato per le ultime major release di WordPress (v1.5.0 testato fino alla 6.7.5).
• Versione gratuita limitata a due design.
• L'interfaccia delle impostazioni è visivamente datata.

💵 Gratuito / Pro a partire da $8.

🔗 Scarica su WordPress.org | 🔗 Versione Pro

2. StichyX Bar

Se i design standard non funzionano e non hai tempo di scrivere barre personalizzate a mano, StichyX Bar ti offre un builder visuale con anteprima live direttamente nel pannello di amministrazione. Orizzontale, verticale, SVG circolare: la geometria si imposta in un minuto, senza una sola riga di CSS.

Sotto il cofano c'è JavaScript puro, niente jQuery, nessuna libreria di terze parti (tranne Chart.js per i grafici). Il rendering SVG mantiene la nitidezza sugli schermi retina e le impostazioni di animazione, da 500 a 5000 ms, permettono di adattare il comportamento al ritmo della pagina. Trigger: scroll, hover o click.

Il Group Builder merita una menzione speciale: più barre vengono assemblate in una griglia a 1-3 colonne e animate in cascata. Per una pagina portfolio o "Chi siamo", una griglia di competenze pronta senza bisogno di un plugin per page builder. Emoji e icone all'interno della barra sono supportati nativamente.

Il plugin è in sviluppo attivo: v1.2.3 di giugno 2026, integrazione con Elementor e Gutenberg, supporto ACF per dati dinamici. Gratuito, senza complicazioni Pro.

Pro:

• Builder visuale con anteprima live nel pannello di amministrazione.
• Tre geometrie (orizzontale, verticale, SVG circolare) in un unico plugin.
• Group Builder per griglie di competenze con animazione a cascata.
• JavaScript vanilla, non carica jQuery.

Contro:

• Solo 10 installazioni attive su WordPress.org, il plugin è molto nuovo.
• Un solo sviluppatore, nessuna garanzia di supporto a lungo termine.
• Nessun preloader e indicatore di lettura (solo barre di contenuto).

💵 Gratuito.

🔗 Scarica su WordPress.org

3. Ultimate Blocks

Non solo un plugin per la barra di avanzamento, ma un set completo di 36 blocchi Gutenberg, uno dei quali è la Progress Bar. Si installa come un normale blocco nell'editor: scegli cerchio o linea, imposta colore, spessore, percentuali e la barra si anima allo scroll.

Il vantaggio principale di Ultimate Blocks è il contesto. Qui la barra di avanzamento non è uno strumento isolato, ma parte di un ecosistema: nello stesso articolo puoi aggiungere Content Toggle (accordion), Table of Contents, Call to Action, il blocco Review con schema markup. Niente shortcode, tutto è nativo in Gutenberg.

Il plugin è in sviluppo attivo: v3.5.7 di giugno 2026, oltre 50.000 installazioni attive, 728 recensioni con una valutazione media di 5 stelle. La versione gratuita è generosa: Progress Bar, Content Filter, Star Rating e altre due dozzine di blocchi senza pagare.

Pro:

• Integrazione completa con Gutenberg, nessuna necessità di imparare una nuova interfaccia.
• 36 blocchi in un unico plugin, la barra di avanzamento è solo uno di questi.
• Sviluppo attivo (aggiornamento giugno 2026).
• Schema markup nei blocchi Review e HowTo.

Contro:

• La barra di avanzamento non è il focus principale, ma una delle 36 funzioni.
• Non adatto a temi non basati su Gutenberg.
• Alcuni blocchi (Coupon, Timeline) solo nella versione Pro.

💵 Versione gratuita / Pro.

🔗 Scarica su WordPress.org

4. PageLoader

PageLoader risolve un compito affine: non un indicatore di lettura o una barra delle competenze, ma un preloader a schermo intero con barra di avanzamento. Il visitatore arriva sul sito, vede una schermata iniziale con caricamento animato. Quando la pagina è pronta, il preloader scompare in modo fluido.

Nelle impostazioni si definisce un timeout o la percentuale reale di caricamento, un'immagine di sfondo (propria o dalla libreria), un'icona, un testo. La barra di avanzamento può essere posizionata ovunque sullo schermo, regolando colore e spessore. L'editor live integrato mostra le modifiche in tempo reale, senza bisogno di passare dal pannello di amministrazione al sito.

Il plugin è compatibile con tutti i temi e dispositivi. Venduto su CodeCanyon senza versione gratuita: pagamento una tantum, non un abbonamento.

Pro:

• L'unico preloader a schermo intero nella selezione.
• Editor live con anteprima immediata.
• Tempistica di caricamento regolabile con precisione.
• Animazioni di comparsa e scomparsa fluide.

Contro:

• Solo versione a pagamento ($26).
• Non adatto a barre delle competenze e indicatori di lettura.
• Non aggiornato tramite il repository di WordPress.org.

💵 $26 una tantum (12 mesi di supporto).

🔗 Pagina su CodeCanyon | 🔗 Demo live

Le barre di avanzamento sono una micro-funzionalità, e non ha senso pagare troppo per averla con un site-builder da 50 blocchi. Ecco tre regole per la scelta.

Se il sito è basato sull'editor classico e servono barre delle competenze, prendi Progress Bar & Skill Bar. Lo shortcode [PROGRESSBAR_WP id=xx] si inserisce in qualsiasi blocco di testo, widget o tema. La versione gratuita copre l'80% delle esigenze, la Pro a $8 amplia il design.

Se ti serve un builder visuale e diverse geometrie senza essere vincolato a un editor specifico, StichyX Bar con anteprima live e grafica SVG. Barre orizzontali, circolari e verticali si configurano nel pannello di amministrazione in un minuto.

Se il sito è su Gutenberg e la barra di avanzamento è solo una delle necessità, installa Ultimate Blocks. La barra di avanzamento arriva insieme a indice, accordion, blocco CTA e Review. Un plugin invece di cinque.

Se ti serve un preloader a schermo intero, PageLoader. L'unico strumento nella selezione per la schermata iniziale di caricamento, con pagamento una tantum senza abbonamenti.

Nel video qui sopra, il processo passo passo per installare e configurare una barra di avanzamento in WordPress: dalla scelta del plugin alla pubblicazione su una pagina.

⁉️🤔 Domande frequenti

In cosa una barra di avanzamento è diversa da un preloader?

Una barra di avanzamento mostra una percentuale all'interno del contenuto: competenza, fase del funnel, indicatore di lettura. Un preloader è una schermata iniziale prima del caricamento del sito: il visitatore vede una barra o un'animazione mentre la pagina viene renderizzata. PageLoader è un preloader; Progress Bar & Skill Bar e StichyX Bar sono barre di contenuto.

Posso installare una barra di avanzamento senza un plugin?

Tecnicamente sì, tramite HTML <progress>, animazioni CSS e JavaScript. Ma senza plugin perdi: editor visuale, responsività nativa, inserimento facile via shortcode o blocco. Per un utente non tecnico, un plugin fa risparmiare 2-3 ore di codifica manuale su ogni barra.

Quale plugin è migliore per Gutenberg?

Ultimate Blocks, l'unico nella selezione con un blocco nativo Gutenberg. La barra di avanzamento si inserisce come blocco, le impostazioni nella sidebar dell'editor. Non serve uscire dall'interfaccia, copiare shortcode o passare al pannello di amministrazione. Anche StichyX Bar supporta un blocco Gutenberg, ma il suo focus è un builder visuale, non un ecosistema di blocchi.

Una barra di avanzamento influisce sulla velocità del sito?

Un plugin di qualità (Progress Bar & Skill Bar, StichyX Bar) aggiunge 2-5 KB di CSS e 1-3 KB di JS, questo non incide sull'LCP. Ultimate Blocks carica di più per via dei 36 blocchi, ma in modo asincrono e solo quelli utilizzati. I preloader (PageLoader) si caricano per primi e possono aggiungere 200-500 ms all'FCP, aspetto da tenere in considerazione. Tutti e quattro i plugin nella selezione caricano gli stili in modo asincrono e non bloccano il rendering.

Serve la versione Pro per le barre circolari?

Dipende dal plugin. Progress Bar & Skill Bar: barre circolari solo nella Pro ($8). StichyX Bar: barre circolari SVG gratis nel builder visuale. Ultimate Blocks: circolari e lineari gratis nel blocco Gutenberg.

💎 Cosa installare nel 2026: sintesi finale

Non esiste una risposta universale, è lo scenario a dettare la scelta.

• Se il sito è basato sull'editor classico e servono barre delle competenze, Progress Bar & Skill Bar. 34 design nella Pro, shortcode senza dipendenza dall'editor, basato su Bootstrap.
• Se servono diverse geometrie con anteprima live, StichyX Bar. Builder visuale, cerchi SVG, griglie di competenze e nessuna riga di CSS.
• Se il sito vive su Gutenberg, Ultimate Blocks. Barra di avanzamento come blocco nativo più indice, accordion e CTA in un unico plugin.
• Se serve una schermata iniziale di caricamento, PageLoader. L'unica opzione tra le quattro che copre specificamente un preloader, non barre di contenuto.

Inizia con la versione gratuita di Progress Bar & Skill Bar: in 5 minuti installi la prima barra e capisci se due design ti bastano. E tu quale plugin per barre di avanzamento usi? Scrivilo nei commenti.