Ben SmithBen Smith
Ben Smith/
Progress Bar
Progress Bar
Progress Bar

Progress Bar

For
From
Status
Updating
Formulas
&& · and
&& · and
ceil
ceil
/
/
empty
empty
floor
floor
format
format
if
if
>=
>=
round
round
slice
slice
Share
❓
Visualises progress based on a goal and current completion.
 
Progress Bar
By Ben • Latest • Was this helpful? Please consider buying me a coffee. Cheers!By Ben • Latest • Was this helpful? Please consider buying me a coffee. Cheers!
By Ben • Latest • Was this helpful? Please consider buying me a coffee. Cheers!
 
FormulasBasic StylesEmoji Variations

Formulas

Simple Bar

if(prop("Completed") / prop("Goal") >= 1, "✅", if(empty(prop("Completed")) and not empty(prop("Goal")), "0%", slice("✦✦✦✦✦✦✦✦✦✦", 0, floor(prop("Completed") / prop("Goal") * 10)) + " " + format(floor(prop("Completed") / prop("Goal") * 100)) + "%"))
☑️ Formula Breakdown
if(prop("Completed") / prop("Goal") >= 1, "✅",
  • If Completed divided by Goal is greater than or equal to 1, display ✅
if(empty(prop("Completed")) and not empty(prop("Goal")), "0%",
  • Otherwise if Completed returns nothing but Goal returns something, display 0%
slice("✦✦✦✦✦✦✦✦✦✦", 0, floor(prop("Completed") / prop("Goal") * 10))
  • Otherwise divide Completed by Goal, round the results to a full number, then remove that number of squares from ✦✦✦✦✦✦✦✦✦✦
+ " " + format(floor(prop("Completed") / prop("Goal") * 100)) + "%"))
  • Add the rounded percentage after the squares.
⚠️ Rounding Notes
Bars will be added at different progress points depending on whether floor, round, or ceil is used in the slice part. floor → 0–9% = No bar, 10–19% = 1 bar, etc. round → 0–4% = No bar, 5–9% = 1 bar, etc. ceil → 0% = No bar, 1–10% - 1 bar, etc.
 

Full Bar

if(prop("Completed") / prop("Goal") >= 1, "✅", slice("✦✦✦✦✦✦✦✦✦✦", 0, floor(prop("Completed") / prop("Goal") * 10)) + slice("✧✧✧✧✧✧✧✧✧✧", 0, ceil(10 - prop("Completed") / prop("Goal") * 10)) + " " + format(floor(prop("Completed") / prop("Goal") * 100)) + "%")
☑️ Formula Breakdown
if(prop("Completed") / prop("Goal") >= 1, "✅",
  • If Completed divided by Goal is greater than or equal to 1, display ✅
slice("✦✦✦✦✦✦✦✦✦✦", 0, floor(prop("Completed") / prop("Goal") * 10))
  • Otherwise divide Completed by Goal, round the results down to a full number, then remove that number of diamonds from ✦✦✦✦✦✦✦✦✦✦
+ slice("✧✧✧✧✧✧✧✧✧✧", 0, ceil(10 - prop("Completed") / prop("Goal") * 10))
  • Then divide Completed by Goal, subtract that from 10, then round the results up to a full number, then remove that number of diamonds from ✧✧✧✧✧✧✧✧✧✧
+ " " + format(floor(prop("Completed") / prop("Goal") * 100)) + "%")
  • Add the rounded percentage after the squares.
⚠️ Rounding Notes
Bars will be added at different progress points depending on whether floor + ceil or ceil + floor is used in the slice parts. floor + ceil → 0–9% = No bar, 10–19% = 1 bar, etc. ceil + floor → 0% = No bar, 1–10% - 1 bar, etc.

Basic Bar

if(prop("Completed") / prop("Goal") >= 1, "✓", slice("++++++++++", 0, floor(prop("Completed") / prop("Goal") * 10)) + slice("−−−−−−−−−−", 0, ceil(10 - prop("Completed") / prop("Goal") * 10)))
☑️ Formula Breakdown
if(prop("Completed") / prop("Goal") >= 1, "✓" ,
  • If Completed divided by Goal is greater than or equal to 1, display ✓
slice("++++++++++", 0, floor(prop("Completed") / prop("Goal") * 10))
  • Otherwise divide Completed by Goal, round the results down to a full number, then remove that number of plus signs from ++++++++++
+ slice("−−−−−−−−−−", 0, ceil(10 - prop("Completed") / prop("Goal") * 10)))
  • Then divide Completed by Goal, subtract that from 10, then round the results up to a full number, then remove that number of subtraction signs from −−−−−−−−−−
⚠️ Rounding Notes
Bars will be added at different progress points depending on whether floor + ceil or ceil + floor is used in the slice part. floor + ceil → 0–9% = No bar, 10–19% = 1 bar, etc. ciel + floor → 0% = No bar, 1–10% - 1 bar, etc.

Slider

if(prop("Completed") / prop("Goal") >= 1, "✓", slice("−−−−−−−−−−", 0, floor(prop("Completed") / prop("Goal") * 10)) + "♦︎" + slice("−−−−−−−−−−", 0, ceil(10 - prop("Completed") / prop("Goal") * 10)))
Inspired by Red Gregory's version
 

Basic Styles

Character Entity Chart → Good reference for the symbols that can be used for the bars.
Progress Bar Styles

Emoji Variations

⚠️
This uses a slightly different formula that includes a replaceAll function to replace each x with a chosen emoji. This is done because slice does not play well with a lot of emojis.
Emoji Progress Bar

Simple Bar

if(prop("Completed") / prop("Goal") >= 1, "✅", if(empty(prop("Completed")) and not empty(prop("Goal")), "0%", replaceAll(slice("xxxxxxxxxx", 0, floor(prop("Completed") / prop("Goal") * 10)), "x", "⭐️") + " " + format(floor(prop("Completed") / prop("Goal") * 100)) + "%"))

Full Bar

if(prop("Completed") / prop("Goal") >= 1, "✅", replaceAll(slice("xxxxxxxxxx", 0, floor(prop("Completed") / prop("Goal") * 10)), "x", "🌳") + replaceAll(slice("xxxxxxxxxx", 0, ceil(10 - prop("Completed") / prop("Goal") * 10)), "x", "🌱") + " " + format(floor(prop("Completed") / prop("Goal") * 100)) + "%")