# Progress Bar
**URL:** https://meta.discourse.org/t/progress-bar/394184
**Category:** Theme component
**Created:** [January 23, 2026, 12:52pm UTC](https://meta.discourse.org/t/progress-bar/394184 "2026-01-23T12:52:25Z")
**Posts on this page:** 1
**Showing post:** 1
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [January 23, 2026, 12:52pm UTC](https://meta.discourse.org/t/progress-bar/394184/1 "2026-01-23T12:52:25Z")
| | | |
| --- | --- | --- |
| ℹ | **Summary** | Add a progress bar to your site |
| 👓 | **Preview** | [todo] |
| 🛠 | **Repository** | [https://github.com/Canapin/Discourse-progress-bar](https://github.com/Canapin/Discourse-progress-bar) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
# Discourse Progress Bar
## Description
This component adds a progress bar to any available outlet of your site.
ℹ It is best used with scripts that update the progress bar value automatically by making a PUT request to `/admin/theme/[theme_component_ID]/setting` with the payload `{"name":"current_value","value":"[yourNewValue]"}`.
The progress bar is optimized to fit in the following outlets:
- `above-main-container`
- `above-site-header`
- `before-header-panel`
- `below-site-header`
- `before-sidebar-sections`
## Use Case
This component was developed to publicly display the donation progress on a community-funded forum.
[ ](https://global.discourse-cdn.com/meta/original/4X/2/3/c/23c8561e19aa0f6b2d1af0f157f9eee152de1094.png)
A custom script used [Ko-fi’s webhooks](https://help.ko-fi.com/hc/en-us/articles/360004162298-Does-Ko-fi-have-an-API-or-webhook#h_01HP1SJCVRMKTQXR9M51SPQQCH) to dynamically update the progress bar for each donation.
Having a progress bar became a **huge** 💪 incentive for the community to donate.
Previously, only a pinned topic was used, and the donation goal was reached over several months.
With the progress bar, the donation goal has been reached in a couple of days for the last few years! 🤯
This progress bar can obviously be used for other purposes. Share what you use it for!
## Screenshots
### 🖥 Desktop
`above-main-container`
`before-sidebar-sections`
`above-site-header`
`before-header-panel` (desktop only)
`below-site-header`
### 📱 Mobile
`above-main-container` and `below-site-header`
`before-sidebar-sections`
`above-site-header`
## Settings
| Setting | Description |
| --- | --- |
| content\_before | Text shown above the progress bar (HTML allowed). Default: `Donations progress` |
| content\_after | Text shown below the progress bar (HTML allowed). Default: empty |
| progress\_bar\_width | Width of the progress bar wrapper. Default: `50%` |
| progress\_bar\_height | Height of the progress bar. Default: `10px` |
| max\_value | Maximum value for the progress bar. Default: `300` |
| current\_value | Current value of the progress bar. Default: `150` |
| value\_display | Value display format shown next to the progress bar. Available placeholders: `{current}`, `{max}`, `{percentage}`. Examples:
`{percentage}%` shows `33%`.
`{current} of {max} rubber ducks` shows `9 of 15 rubber ducks`. Default: `{percentage}%` |
| hide\_when\_full | Hide the progress bar when it’s full. Default: `false` |
| outlet\_name | Site location where the progress bar is displayed. Recommended outlets: `above-main-container`, `above-site-header`, `before-header-panel`, `below-site-header`, `before-sidebar-sections`. Default: `above-main-container` |
| display\_on\_mobile | Show the progress bar on mobile devices. Default: `true` |
| display\_on\_homepage | Show the progress bar on the homepage. Default: `true` |
| url\_must\_contain | URLs where the progress bar is displayed. Default: `/latest|/categories|/new|/unread|/top*|/tag/*|/tags/*|/c/*|/t/*` |
| progress\_bar\_color | Valid CSS background value. Examples:
`#FC0FC0`
`rgb(252,15,192)`
`var(--tertiary)`
`linear-gradient(0deg, white 0%, var(--tertiary) 100%)`
Note: if empty, a dynamic color is used from red (0%) to green (100%). Default: `var(--tertiary)` |
## Thanks
Thanks @Arkshine, for general code help and advice ✌
---
_[View the full topic](https://meta.discourse.org/t/progress-bar/394184)._