Add <progress> support


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.

(Manthan Mallikarjun) #2

This would fit well into a plugin like the spoiler one.

(Mittineague) #3

Exactly. I see no reason for this to be in Core when it is probably one of the easiest Plugins there could be. eg,


# name: progress
# version: 0.1 

register_asset "javascripts/progress.js.es6", :server_side


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?

(Mittineague) #5

I drop mine into the localhost folder instead of doing Git, so I don’t know if this is correct

    - exec:
    cd: $home/plugins
      - mkdir -p plugins
      - git clone
      - git clone

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.

(Mittineague) #7

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…

(Mittineague) #9

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:
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


Alright! The plugin didn’t load correctly because the code wasn’t wrapped in a function. Once I fixed that, it worked great.


ProgressBar Plugin: (src)

(Mittineague) #11

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:

(Daniela) #13

@SidV have you installed it?
Is it still working?


If you find the discourse-progressbar.git tell me :wink:
Maybe @Mittineague knows something about this :thumbsup:

(Daniela) #15

@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.


Check this out: