# Barra di avanzamento
**URL:** https://meta.discourse.org/t/progress-bar/394184
**Category:** Theme component
**Created:** [23 Gennaio 2026, 12:52pm UTC](https://meta.discourse.org/t/progress-bar/394184 "2026-01-23T12:52:25Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [23 Gennaio 2026, 12:52pm UTC](https://meta.discourse.org/t/progress-bar/394184/1 "2026-01-23T12:52:25Z")
| | | |
| --- | --- | --- |
| ℹ | **Riepilogo** | Aggiungi una barra di avanzamento al tuo sito |
| 👓 | **Anteprima** | \[todo\] |
| 🛠 | **Repository** | \u003chttps://github.com/Canapin/Discourse-progress-bar\u003e |
| ❓ | **Guida all’installazione** | [Come installare un tema o un componente tema](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **Nuovo ai temi di Discourse?** | [Guida per principianti all’utilizzo dei temi di Discourse](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Installa questo componente tema
# Barra di Avanzamento di Discourse
## Descrizione
Questo componente aggiunge una barra di avanzamento a qualsiasi punto di uscita disponibile del tuo sito.
ℹ È meglio utilizzarlo con script che aggiornano automaticamente il valore della barra di avanzamento effettuando una richiesta PUT a `/admin/theme/[theme_component_ID]/setting` con il payload `{\"name\":\"current_value\",\"value\":\"[yourNewValue]\"}`.
La barra di avanzamento è ottimizzata per adattarsi ai seguenti punti di uscita:
- `above-main-container`
- `above-site-header`
- `before-header-panel`
- `below-site-header`
- `before-sidebar-sections`
## Caso d’uso
Questo componente è stato sviluppato per visualizzare pubblicamente il progresso delle donazioni su un forum finanziato dalla comunità.
[ ](https://global.discourse-cdn.com/meta/original/4X/2/3/c/23c8561e19aa0f6b2d1af0f157f9eee152de1094.png)
Uno script personalizzato ha utilizzato [gli webhook di Ko-fi](https://help.ko-fi.com/hc/en-us/articles/360004162298-Does-Ko-fi-have-an-API-or-webhook#h_01HP1SJCVRMKTQXR9M51SPQQCH) per aggiornare dinamicamente la barra di avanzamento per ogni donazione.
Avere una barra di avanzamento è diventato un **enorme** 💪 incentivo per la comunità a donare.
In precedenza, veniva utilizzato solo un argomento bloccato e l’obiettivo di donazione veniva raggiunto nell’arco di diversi mesi.
Con la barra di avanzamento, l’obiettivo di donazione è stato raggiunto in un paio di giorni negli ultimi anni! 🤯
Questa barra di avanzamento può ovviamente essere utilizzata per altri scopi. Condividi per cosa la utilizzi!
## Screenshot
### 🖥 Desktop
`above-main-container`
`before-sidebar-sections`
`above-site-header`
`before-header-panel` (solo desktop)
`below-site-header`
### 📱 Mobile
`above-main-container` e `below-site-header`
`before-sidebar-sections`
`above-site-header`
## Impostazioni
| Impostazione | Descrizione |
| --- | --- |
| content\_before | Testo mostrato sopra la barra di avanzamento (HTML consentito). Predefinito: `\u003cstrong\u003eProgresso donazioni\u003c/strong\u003e` |
| content\_after | Testo mostrato sotto la barra di avanzamento (HTML consentito). Predefinito: vuoto |
| progress\_bar\_width | Larghezza del contenitore della barra di avanzamento. Predefinito: `50%` |
| progress\_bar\_height | Altezza della barra di avanzamento. Predefinito: `10px` |
| max\_value | Valore massimo per la barra di avanzamento. Predefinito: `300` |
| current\_value | Valore corrente della barra di avanzamento. Predefinito: `150` |
| value\_display | Formato di visualizzazione del valore mostrato accanto alla barra di avanzamento. Segnaposto disponibili: `{current}`, `{max}`, `{percentage}`. Esempi:\u003cbr\u003e`{percentage}%` mostra `33%`.\u003cbr\u003e`{current} di {max} paperelle di gomma` mostra `9 di 15 paperelle di gomma`. Predefinito: `{percentage}%` |
| hide\_when\_full | Nasconde la barra di avanzamento quando è piena. Predefinito: `false` |
| outlet\_name | Posizione nel sito in cui viene visualizzata la barra di avanzamento. Punti di uscita consigliati: `above-main-container`, `above-site-header`, `before-header-panel`, `below-site-header`, `before-sidebar-sections`. Predefinito: `above-main-container` |
| display\_on\_mobile | Mostra la barra di avanzamento sui dispositivi mobili. Predefinito: `true` |
| display\_on\_homepage | Mostra la barra di avanzamento sulla homepage. Predefinito: `true` |
| url\_must\_contain | URL in cui viene visualizzata la barra di avanzamento. Predefinito: `/latest |
| progress\_bar\_color | Valore CSS background valido. Esempi:\u003cbr\u003e`#FC0FC0`\u003cbr\u003e`rgb(252,15,192)`\u003cbr\u003e`var(--tertiary)`\u003cbr\u003e`linear-gradient(0deg, white 0%, var(--tertiary) 100%)`\u003cbr\u003eNota: se vuoto, viene utilizzato un colore dinamico da rosso (0%) a verde (100%). Predefinito: `var(--tertiary)` |
## Ringraziamenti
Grazie a @Arkshine, per l’aiuto generale con il codice e i consigli ✌
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [28 Gennaio 2026, 6:32pm UTC](https://meta.discourse.org/t/progress-bar/394184/2 "2026-01-28T18:32:50Z")
Adoro questo! Ci sono piani per consentire più di una barra contemporaneamente?
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [28 Gennaio 2026, 7:08pm UTC](https://meta.discourse.org/t/progress-bar/394184/3 "2026-01-28T19:08:18Z")
Non proprio. Ho creato questo plugin per le mie esigenze e di sicuro non ho bisogno di più di 1 barra di avanzamento, ma sono aperto alle pull request 🙂 (nel qual caso, l’aggiunta di più barre laterali non dovrebbe rompere le impostazioni esistenti)