해봄해봄
해봄/
🌮
잡동사니/
NotionNotion
Notion/
멋쟁이 사자들 가보자고멋쟁이 사자들 가보자고
멋쟁이 사자들 가보자고/
🏐
연습장/
⏳
Progress Bar
⏳

Progress Bar

Progress Bar

Formulas

Simple Bar

(prop("Completed") / prop("Goal") >= 1) ? "✅" : (and(empty(prop("Completed")), not empty(prop("Goal"))) ? "0%" : format(slice("■■■■■■■■■■", 0, floor(prop("Completed") / prop("Goal") * 10)) + " " + format(round(prop("Completed") / prop("Goal") * 100)) + (empty(prop("Completed")) ? "0%" : "%")))
⚠️ 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.
☑️ Formula Breakdown
(prop("Completed") / prop("Goal") >= 1) ? "✅"
  • If Completed divided by Goal is greater than or equal to 1, display ✅
: (and(empty(prop("Completed")), not empty(prop("Goal"))) ? "0%"
  • Otherwise if Completed returns nothing but Goal returns something, display 0%
: format(slice("■■■■■■■■■■", 0, round(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(round(prop("Completed") / prop("Goal") * 100))
  • Add the rounded percentage after the squares.
+ empty(prop("Completed")) ? "0%" : "%")))
  • And add 0% if Completed is empty, or just % if it isn't.

Full Bar

(prop("Completed") / prop("Goal") >= 1) ? "✅" : format(slice("■■■■■■■■■■", 0, floor(prop("Completed") / prop("Goal") * 10)) + format(slice("□□□□□□□□□□", 0, ceil(10 - prop("Completed") / prop("Goal") * 10)) + " " + format(round(prop("Completed") / prop("Goal") * 100)) + (empty(prop("Completed")) ? "0%" : "%")))
⚠️ 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.
☑️ Formula Breakdown
(prop("Completed") / prop("Goal") >= 1) ? "✅"
  • If Completed divided by Goal is greater than or equal to 1, display ✅
: format(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 squares from ▓▓▓▓▓▓▓▓▓▓
+ format(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 squares from ░░░░░░░░░░
+ " " + format(round(prop("Completed") / prop("Goal") * 100))
  • Add the rounded percentage after the squares.
+ (empty(prop("Completed")) ? "0%" : "%")))
  • And add 0% if Completed is empty, or just % if it isn't.

Small Bar

(prop("Completed") / prop("Goal") >= 1) ? "✓" : format(slice("••••••••••", 0, floor(prop("Completed") / prop("Goal") * 10)) + format(slice("◦◦◦◦◦◦◦◦◦◦", 0, ceil(10 - prop("Completed") / prop("Goal") * 10))))
⚠️ 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.
☑️ Formula Breakdown
(prop("Completed") / prop("Goal") >= 1) ? "✓"
  • If Completed divided by Goal is greater than or equal to 1, display ✓
: format(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 squares from ••••••••••
+ format(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 squares from ◦◦◦◦◦◦◦◦◦◦
 

Styles

Character Entity Chart → Good reference for the symbols that can be used for the bars. Emojis won't work as they register as more than one "character" so the slice function fails.
Progress Bar Styles

Rounding Variations & Comparisons

Progress Bar Variations & Comparisons