# Advice or feature suggestions for a real-time progress bar theme component

**URL:** https://meta.discourse.org/t/advice-or-feature-suggestions-for-a-real-time-progress-bar-theme-component/255622
**Category:** Development
**Created:** [February 19, 2023, 7:13pm UTC](https://meta.discourse.org/t/advice-or-feature-suggestions-for-a-real-time-progress-bar-theme-component/255622 "2023-02-19T19:13:25Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [February 19, 2023, 7:13pm UTC](https://meta.discourse.org/t/advice-or-feature-suggestions-for-a-real-time-progress-bar-theme-component/255622/1 "2023-02-19T19:13:25Z")

</div>

Hi everyone!

I’m working on a progress bar theme component prototype.

The initial purpose was to have a donations progress bar for users to see on my forum since the servers’ fees are paid by our users, via my [ko-fi.com](http://ko-fi.com) account.

Each time a ko-fi donation is made, ko-fi sends a request to a PHP script I made, which triggers a request to Discourse to update the current amount setting.

The PHP script part isn’t directly related to the component, and I’d like a component that could be used for many other purposes.

I don’t have the knowledge to create an elaborate component, but I think it could interest some other people here, so if you think of interesting features, or know code better than me and think could be made better and more efficient, feel free to participate 🙂

Here’s what it currently looks like:

The repo: [GitHub - Canapin/discourse-progress-bar: Adds a progress bar to Discourse · GitHub](https://github.com/Canapin/Discourse-custom-progress-bar)

What we can do:

- Adds HTML on top or below the progress bar

- Change the component width and progress bar height

- The progress bar as well as the numbers are set via CSS.  
Numbers use a `content` CSS property because I didn’t know how to update them in real time otherwise.

What I’d like to add:

- Automatically disable or hide the component when the amount is reached

- Descriptions for each setting

- I feel the code isn’t “Discourse coding style”. It doesn’t use anything from Discourse. I don’t mean it should, but maybe it could be a cleaner way to do it as well as benefit from Discourse’s existing methods for some current or future features.

* * *

If you’re interested in such a component, please feel free to share whatever you have to say about it 🙂

---

<div class="post-metadata">

### Author: ![barto\_95](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/barto_95/32/199996_2.png) [@barto\_95](https://meta.discourse.org/u/barto_95)
#### Post date: [October 18, 2024, 9:54pm UTC](https://meta.discourse.org/t/advice-or-feature-suggestions-for-a-real-time-progress-bar-theme-component/255622/4 "2024-10-18T21:54:57Z")

</div>

How to use and install your component ?

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [October 19, 2024, 1:28am UTC](https://meta.discourse.org/t/advice-or-feature-suggestions-for-a-real-time-progress-bar-theme-component/255622/5 "2024-10-19T01:28:07Z")

</div>

> [@Installing a theme or theme component](https://meta.discourse.org/t/installing-a-theme-or-theme-component/63682):
>
> bookmark This is a guide for installing and managing themes and theme components in Discourse. person_raising_hand Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…

---

<div class="post-metadata">

### Author: ![agemo](https://avatars.discourse-cdn.com/v4/letter/a/ac91a4/32.png) [@agemo](https://meta.discourse.org/u/agemo)
#### Post date: [August 25, 2025, 11:55am UTC](https://meta.discourse.org/t/advice-or-feature-suggestions-for-a-real-time-progress-bar-theme-component/255622/6 "2025-08-25T11:55:28Z")

</div>

This is a great idea and a feature that could work really well in multiple applications.

My questions are:

- Can the progress- bar be placed in a post and other locations?
- Can multiple progress-bars be placed at once for multi fund raising activities?

Essentially what you seem to be potentially creating here is an in-house go fund me capability for any discourse installation.

In theory it could be open to other users too. Say if a discourse instance wanted to run a “fund me/my project” type category.

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [August 25, 2025, 12:22pm UTC](https://meta.discourse.org/t/advice-or-feature-suggestions-for-a-real-time-progress-bar-theme-component/255622/7 "2025-08-25T12:22:38Z")

</div>

> [@agemo](#):
>
> - Can the progress- bar be placed in a post and other locations?

No.

> [@agemo](#):
>
> - Can multiple progress-bars be placed at once for multi fund raising activities?

No.

I probably won’t work much on this theme component, perhaps just trying to have it working each year when I enable donations, which is why I didn’t create a #Customization > Theme component topic about it.

Plus, I think the real-time update of the progress bar doesn’t work anymore. I didn’t try, but:

> [@Install the Discourse Theme CLI console app to help you build themes](https://meta.discourse.org/t/install-the-discourse-theme-cli-console-app-to-help-you-build-themes/82950/202):
>
> Live reloads of stylesheets have [been disabled for production instances](https://github.com/discourse/discourse/commit/351d3d4eb94390ef667b72e3d4ba9c740224c44c), because they were causing problems when updating themes and/or Discourse core. Fundamentally: stylesheet changes are often tied to changes in JS/HTML, so live-loading for only stylesheets is risky. Users end up running ‘new’ stylesheets against ‘old’ HTML, which can lead to some very strange experiences. Live-loading is still enabled for development-mode Discourse instances. Ideally, you’d use that for development rather …

If enough (or knowledgeable) people find a progress bar useful, I encourage them to create a fork or a whole new component with new features.

---

<div class="post-metadata">

### Author: ![agemo](https://avatars.discourse-cdn.com/v4/letter/a/ac91a4/32.png) [@agemo](https://meta.discourse.org/u/agemo)
#### Post date: [August 25, 2025, 12:42pm UTC](https://meta.discourse.org/t/advice-or-feature-suggestions-for-a-real-time-progress-bar-theme-component/255622/8 "2025-08-25T12:42:50Z")

</div>

Thanks for the quick reply. I had a few use cases for this if it was closer to be ready for prime time. It would be a cool feature to have.
