In a discussion titled “Add support” under the Feature category, KazWolfe proposes adding the HTML <progress> tag to Discourse for visualizing statistics. nahtnam and Mittineague agree it’s better suited as a plugin than core functionality. Mittineague provides a minimal plugin structure, but KazWolfe reports it fails to render. After troubleshooting, KazWolfe confirms the issue was missing function wrapping in the JS file — once fixed, the progress bar works. Mittineague clarifies that .js files require this wrapping, unlike .es6. Later, SidV notes the original GitHub repo is gone but finds an alternative: a Material Design-inspired progress.js linked here. Others, including dax and SidV, ask if the plugin still works or if Mittineague plans to fix it. The thread ends with a working solution and community collaboration to revive the plugin.
I would like to propose the adding of the <progress /> tag to Discourse. It can be very useful, and can be used wherever a visual representation of a statistic is worthwhile. For example, “1/30 users registered” or “$50 raised of our $500 goal” would be much better represented as a progress element than text.
Additionally, progress bars should be CSS-customizable.
This would fit well into a plugin like the spoiler one.
Exactly. I see no reason for this to be in Core when it is probably one of the easiest Plugins there could be. eg,
plugin.rb
# name: progress
# version: 0.1
register_asset "javascripts/progress.js.es6", :server_side
progress.js.es6
Discourse.Markdown.whiteListTag("progress", "class", /d-prog/);
Discourse.Markdown.whiteListTag("progress", "max", /[0-9\.]+/);
Discourse.Markdown.whiteListTag("progress", "value", /[0-9\.]+/);
I think I screwed up something. It’s still refusing to work.
Can someone give me feedback? https://github.com/pacificfils/discourse-progressbar
I drop mine into the localhost folder instead of doing Git, so I don’t know if this is correct
- exec:
cd: $home/plugins
cmd:
- mkdir -p plugins
- git clone https://github.com/discourse/docker_manager.git
- git clone https://github.com/pacificfils/discourse-progressbar.git
What did you try in the post?
I also tried <progress class="d-prog" value="0.3" max="1.0">30%</progress>
and it worked for me.
Maybe a browser support issue?
Chrome Firefox (Gecko) IE Opera Safari
6.0 6.0 (6.0)[1][2] 10 11.0 5.2
.
Android Firefox M (Gecko) IE M Opera M Safari M
Yes 6.0 (6.0)[1][2] Not supported 11.0 7[3]
I tried:
<progress class="d-prog" value="0.1" max="1.0"></progress>
and got a blank post in return, suggesting that there’s something wrong with the plugin. It does load, though.
It can’t be browser incompatibility, I’m running Chrome, and I see it everywhere else.
AFAIK the progress tag requires something between the opening and closing tags. (though it might only be a fallback for browser’s that don’t support the tag)
and it isn’t “min” it’s “value”
* you’re thinking of the meter tag?
Sorry, that was a typo on my part. Still doesn’t work with something in between the tags.
I’m suspecting the plugin. It doesn’t show up on the Admin Panel list either…
If it isn’t showing at all in the Admin → plugins page it may not have installed OK
* to get a link there you need to put
# url: http://somedomain.com/path
in plugin.rb
The progress tag does not show in the preview
And it doesn’t show in the post right away until after it’s “cooked”
* notice I was wrong and that nothing is required between the tags
Thanks!
ProgressBar Plugin: https://github.com/pacificfils/discourse-progressbar.git (src)
Ah, yes. If the file has a “.js” extension it needs that. When it has an “.es6” extension it runs “auto-magically” and doesn’t need to be.
The repository from github is gone. 
Update: found this:
https://github.com/SGColdSun/discourse-progressbar
@SidV have you installed it?
Is it still working?
If you find the discourse-progressbar.git tell me 
Maybe @Mittineague knows something about this 
@Mittineague, any chance you fix this plugin?
I found new progress.js
Material Progress —Google Material Design Progress linear bar. By using CSS3 and vanilla JavaScript.
Demo
Check this out:
