Progress Bar

[Canapin (Coin-coin le Canapin)]

	Summary	Add a progress bar to your site
	Preview	[todo]
	Repository	https://github.com/Canapin/Discourse-progress-bar
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

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.

A custom script used Ko-fi’s webhooks 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: <strong>Donations progress</strong>
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