Created
Apr 11, 2020 3:22 PM
Tags
- 👇 Hey you, do you want progress bars in your Notion database?
- 🖼 Enough talking, show me the goods
- 🤩 Okay I'm in, how do you do this?
- 1️⃣ Step 1: Define the source of your progress bar
- 🔢 From a number / text
- 🔢 From two numbers
- ☑️ From checkboxes
- 🔍 From a rollup
- ⌨ From text
- 2️⃣ Step 2 - Customise your progress bar
- 🤔 Monospaced or not?
- 🔣 Choose your characters
- ⚙ Generator options
- 3️⃣ Step 3: Generate your progress bar
- 💯 The generator
- 🐥 Step by Step
- 😢 Help me
- 👤 The author
- 📝 Changelog
👇 Hey you, do you want progress bars in your Notion database?
This page will guide you on how to create your custom progress bar!
🖼 Enough talking, show me the goods
| Name | progress | Progress bar preview | Generated Formula |
|---|---|---|---|
2 | 5 / 7 % | □□□□□□□□□□ | slice(\"■■■■■■■■■■\", 0, round(prop(\"% value\") * 0.1) )+slice(\"□□□□□□□□□□\", 0, 10 - round(prop(\"% value\") * 0.1) ) |
🤩 Okay I'm in, how do you do this?
You have roughly 3 steps to success:
- Defining what you want to show the progress of
- Customising the progress bar
- Generating the formula
You'll first create a column named "% value" in your database to "extract" the percentage of your progress bar.
Before creating the progress bar, you'll see the customisation options of the generator.
Selecting the options, copying the generated progress bar's formula and boom.
1️⃣ Step 1: Define the source of your progress bar
Before having a progress bar you may ask yourself what do you want to display the progress of? Number? Checkboxes? Rollup? Let's define this first before creating our bar!
As I said above,
% value will display the percentage of your bar (a number between 0 and 100). You can change this name after pasting your progress bar's formula (Notion will rename the names in the formula for you) and hide it in your views.I'm writing the formulas in code blocks for clarity. You can use my 
Formulas convertor
Notion shared convertors
Having another use case? Feel free to comment here and I will see what I can do !
🔢 From a number / text
The simplest, you write your percentage and boom a progress bar!
Works for both number or text column.
‣
Progress from number
% value 's formula‣
^[-+]?[0-9 ]*\.?[0-9 ]+$
- matches an optional sign
- that is either followed by zero or more digits
- followed by a dot and one or more digits (a floating point number with optional integer part)
- or that is followed by one or more digits (an integer).
‣
max( 0, min( 100, if( toNumber(prop("progress")) != 0 and empty(prop("progress")), 0, if( not test(prop("progress"), "^[-+]?[0-9]*\.?[0-9]+$"), 0, toNumber(prop("progress")) ) ) ) )‣
max(
0,
min(
100,
if(
toNumber(prop("progress")) != 0
and
empty(prop("progress")),
0,
if(
not test(prop("progress"), "^[-+]?[0-9]*\.?[0-9]+$"),
0,
toNumber(prop("progress"))
)
)
)
)🔢 From two numbers
Maybe you prefer a current number with a maximum number in mind?
‣
Progress from two numbers
% value 's formula‣
max( 0, min( 100, if( empty(prop("done")) or empty(prop("goal")), 0, round( prop("done") / prop("goal") * 100 ) ) ) )‣
max(
0,
min(
100,
if(
empty(prop("done")) or empty(prop("goal")),
0,
round(
prop("done") / prop("goal") * 100
)
)
)
)☑️ From checkboxes
Have multiple checkboxes to fill?
‣
Progress from checkboxes
% value 's formula‣
max( 0, min( 100, round( ( (prop("One") ? 1 : 0) + (prop("Two") ? 1 : 0) + (prop("Three") ? 1 : 0) ) * 100 / 3 ) ) )‣
max(
0,
min(
100,
round(
(
(prop("One") ? 1 : 0)
+
(prop("Two") ? 1 : 0)
+
(prop("Three") ? 1 : 0)
)
* 100 / 3
)
)
)🔍 From a rollup
How I see, you have advanced databases with relations.
‣
Progress from rollup
done's rollup
- Select your relation
- Select the checkbox's
Doneproperty - Calculate
Percent checked
‣
Progress from rollup
% value 's formula‣
max( 0, min( 100, if( empty(prop("done")), 100, toNumber(prop("done")) * 100 ) ) )‣
max(
0,
min(
100,
if(
empty(prop("done")),
100,
toNumber(prop("done")) * 100
)
)
)⌨ From text
You want the two first solutions in one? boom. magic.
In this one, you just have to write your percentage in a text field and everything is calculated for you. You can even write the percentage in a fraction and the formula takes care of it.
‣
Progress from text
% value 's formulaThis one is more magical with regexes,
‣
‣
^((\s*\d+([.,]\d)?\s*\/\s*\d+([.,]\d)?\s*)|(\s*\d+([.,]\d)?\s*))\s*\%?\s*$- ✅
1 / 7 - ✅
14 - ✅
25 %
‣
^\s*\d+([.,]\d)?\s*\/\s*\d+([.,]\d)?\s*\s*\%?\s*$- ✅
1 / 7 - ❌
14 - ❌
25 %
‣
^\s*\d+([.,]\d)?\s*\s*\%?\s*$- ❌
1 / 7 - ✅
14 - ✅
25 %
‣
round( if(toNumber(prop("progress")) != 0 and empty(prop("progress")), 0, max( min( if( not test(prop("progress"), "^((\s*\d+([.,]\d)?\s*\/\s*\d+([.,]\d)?\s*)|(\s*\d+([.,]\d)?\s*))\s*\%?\s*$"), 0, if(test(prop("progress"), "^\s*\d+([.,]\d)?\s*\/\s*\d+([.,]\d)?\s*\s*\%?\s*$"), toNumber( replace( replace( prop("progress"), "^\s*", "" ), "\s*\/\s*\d+([.,]\d)?\s*\s*\%?\s*$", "" ) ) * 100 / toNumber( replace( replace( prop("progress"), "^\s*\d+([.,]\d)?\s*\/\s*", "" ), "\s*\s*\%?\s*$", "" ) ), toNumber( replace( replace( prop("progress"), "^\s*", "" ), "\s*\s*\%?\s*$", "" ) ) ) ), 100 ), 0 ) ) )‣
round(
if(toNumber(prop("progress")) != 0 and empty(prop("progress")),
0,
max(
min(
if(
not test(prop("progress"), "^((\s*\d+([.,]\d)?\s*\/\s*\d+([.,]\d)?\s*)|(\s*\d+([.,]\d)?\s*))\s*\%?\s*$"),
0,
if(test(prop("progress"), "^\s*\d+([.,]\d)?\s*\/\s*\d+([.,]\d)?\s*\s*\%?\s*$"),
toNumber(
replace(
replace(
prop("progress"),
"^\s*",
""
),
"\s*\/\s*\d+([.,]\d)?\s*\s*\%?\s*$",
""
)
)
*
100
/
toNumber(
replace(
replace(
prop("progress"),
"^\s*\d+([.,]\d)?\s*\/\s*",
""
),
"\s*\s*\%?\s*$",
""
)
),
toNumber(
replace(
replace(
prop("progress"),
"^\s*",
""
),
"\s*\s*\%?\s*$",
""
)
)
)
),
100
),
0
)
)
)| Name | progress | % value | % |
|---|---|---|---|
number | 100 | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % |
done / goal | 2 / 7 | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % |
number with % | 60 % | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % |
empty | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % | |
number | 100 | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % |
done / goal with % | 5 / 5 % | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % |
floating number | 25.8 | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % |
floating number with % | 78.2 % | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % |
floating done / goal | 1.5 / 3 | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % |
done / floating goal | 1 / 1.5 | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % |
floating done / floating goal | 1.5 / 3.5 | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % |
2️⃣ Step 2 - Customise your progress bar
If you want a progress bar you should beforehand choose how it looks!
🤔 Monospaced or not?
You have two choices: monospaced and non-monospaced characters.
Consider this: if you want your progress bar to always have the same width you should pick monospaced characters ; if you display them in a database's column all the bars will have the same width.
For example ⣿ and ⣀ are monospaced.
⣿⣀⣀⣀⣀⣀⣀⣀⣀⣀ = 10 %
⣿⣿⣿⣿⣿⣿⣿⣿⣀⣀ = 80 %
In contrast, if you want your progress bar to be with only one character or are using Notion's monospaced font (Top-right corner / Mono) you can choose more characters.
For example these two bars may looks weird in Sans-Serif font:
█████░░░░░ ██████████
Now change this page's font (Top-right corner / Mono) and you will notice that their width is now the same!
‣
‣
‣
🔣 Choose your characters
Below is a list of the characters that i've found.
Using characters not listed below? Feel free to comment here and I will add them !
They are sorted in 3 categories
- Monospaced: works for both Sans-Serif and Mono font
- Monospaced (Mono): monospaced when used with Mono font
- Non-monospaced: not monospaced for both fonts
- Alone: only one (but stylish) character
| Name | Type | Characters | Full | Empty | Full (Name) | Empty (Name) |
|---|---|---|---|---|---|---|
Blocks | Monospaced | █████▁▁▁▁▁
██████████
▁▁▁▁▁▁▁▁▁▁ | █ | ▁ | FULL BLOCK | LOWER ONE EIGHTH BLOCK |
Braille | Monospaced | ⣿⣿⣿⣿⣿⣀⣀⣀⣀⣀
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ | ⣿ | ⣀ | BRAILLE PATTERN DOTS-12345678 | BRAILLE PATTERN DOTS-78 |
Bullets | Monospaced | •••••◦◦◦◦◦
••••••••••
◦◦◦◦◦◦◦◦◦◦ | • | ◦ | BULLET | WHITE BULLET |
Circle (medium) | Monospaced | ⚫⚫⚫⚫⚫⚪⚪⚪⚪⚪
⚫⚫⚫⚫⚫⚫⚫⚫⚫⚫
⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪ | ⚫ | ⚪ | MEDIUM BLACK CIRCLE | MEDIUM WHITE CIRCLE |
Circles | Monospaced | ●●●●●○○○○○
●●●●●●●●●●
○○○○○○○○○○ | ● | ○ | BLACK CIRCLE | WHITE CIRCLE |
Circles (with dots) | Monospaced | ⚈⚈⚈⚈⚈⚆⚆⚆⚆⚆
⚈⚈⚈⚈⚈⚈⚈⚈⚈⚈
⚆⚆⚆⚆⚆⚆⚆⚆⚆⚆ | ⚈ | ⚆ | BLACK CIRCLE WITH WHITE DOT RIGHT | WHITE CIRCLE WITH DOT RIGHT |
Crossed boxes | Monospaced | ⌧⌧⌧⌧⌧□□□□□
⌧⌧⌧⌧⌧⌧⌧⌧⌧⌧
□□□□□□□□□□ | ⌧ | □ | X IN A RECTANGLE BOX | WHITE SQUARE |
Plus / Minus | Monospaced | +++++−−−−−
++++++++++
−−−−−−−−−− | + | − | PLUS SIGN | MINUS SIGN |
Rectangle | Monospaced | ▮▮▮▮▮▯▯▯▯▯
▮▮▮▮▮▮▮▮▮▮
▯▯▯▯▯▯▯▯▯▯ | ▮ | ▯ | BLACK VERTICAL RECTANGLE | WHITE VERTICAL RECTANGLE |
Square | Monospaced | ■■■■■□□□□□
■■■■■■■■■■
□□□□□□□□□□ | ■ | □ | BLACK SQUARE | WHITE SQUARE |
Stars 4 | Monospaced | ✦✦✦✦✦✧✧✧✧✧
✦✦✦✦✦✦✦✦✦✦
✧✧✧✧✧✧✧✧✧✧ | ✦ | ✧ | BLACK FOUR POINTED STAR | WHITE FOUR POINTED STAR |
Stars 5 | Monospaced | ★★★★★☆☆☆☆☆
★★★★★★★★★★
☆☆☆☆☆☆☆☆☆☆ | ★ | ☆ | BLACK STAR | WHITE STAR |
Filled blocks | Monospaced (Mono) | █████░░░░░
██████████
░░░░░░░░░░ | █ | ░ | FULL BLOCK | LIGHT SHADE |
Parallelogram | Monospaced (Mono) | ▰▰▰▰▰▱▱▱▱▱
▰▰▰▰▰▰▰▰▰▰
▱▱▱▱▱▱▱▱▱▱ | ▰ | ▱ | BLACK PARALLELOGRAM | WHITE PARALLELOGRAM |
Divides | Alone | ∣∣∣∣∣∣∣∣∣∣ | ∣ | DIVIDES | ||
Dot (down) | Alone | .......... | . | FULL STOP | ||
Dot (middle) | Alone | ·········· | · | MIDDLE DOT | ||
Fisheye | Alone | ◉◉◉◉◉◉◉◉◉◉ | ◉ | FISHEYE | ||
Long dash | Alone | —————————— | — | EM DASH | ||
Medium dash | Alone | −−−−−−−−−− | − | MINUS SIGN | ||
Small dash | Alone | ---------- | - | HYPHEN-MINUS | ||
ZigZag | Alone | ⦚⦚⦚⦚⦚⦚⦚⦚⦚⦚ | ⦚ | VERTICAL ZIGZAG LINE |
⚙ Generator options
Want to show something special when at 0%? 100% ? Want to show at the beginning or at the end of your bar the percentage ? Want this number padded with the number 0 ? Want to show a full bar ?
All the options bellow are available in the progress bar generator.
Want a new custom display? Feel free to comment here and I will what I can do!
| Name | progress | % |
|---|---|---|
Nothing | 100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ |
Nothing | 100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ |
Nothing | 100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ |
At the start | 100 | 100 % ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ |
At the start | 100 | 100 % ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ |
At the start | 100 | 100 % ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ |
At the end | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % |
At the end | 30 | ⣿⣿⣿⣀⣀⣀⣀⣀⣀⣀ 030 % |
At the end | 100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 % |
With padding of zeros | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % |
With padding of zeros | 30 | ⣿⣿⣿⣀⣀⣀⣀⣀⣀⣀ 030 % |
With padding of zeros | 100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 % |
Without padding of zeros | 100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 % |
Without padding of zeros | 100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 % |
Without padding of zeros | 100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 % |
Without % sign | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 |
Without % sign | 30 | ⣿⣿⣿⣀⣀⣀⣀⣀⣀⣀ 030 |
Without % sign | 100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 |
Special start | 100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 |
Special start | 100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 |
Special start | 100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 |
Special end | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 |
Special end | 30 | ⣿⣿⣿⣀⣀⣀⣀⣀⣀⣀ 030 |
Special end | 100 | ✅ |
Not full bar | 0 | 000 |
Not full bar | 30 | ⣿⣿⣿ 030 |
Not full bar | 100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 |
‣
Progress custom displays
%'s formulaif(
prop("Name") == "Nothing",
(slice( "⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿", 0, round(prop("% value") * 0.1) ) + slice( "⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀", 0, 10 - round(prop("% value") * 0.1) )),
if(
prop("Name") == "At the start",
(if( prop("% value") == 0, "0", format(prop("% value")) ) + " % " + slice( "⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿", 0, round(prop("% value") * 0.1) ) + slice( "⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀", 0, 10 - round(prop("% value") * 0.1) )),
if(
prop("Name") == "At the end",
(slice( "⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿", 0, round(prop("% value") * 0.1) ) + slice( "⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀", 0, 10 - round(prop("% value") * 0.1) ) + " " + if(prop("% value") < 10, "00", if(prop("% value") < 100, "0", "" )) + if( prop("% value") == 0, "0", format(prop("% value")) ) + " %"),
if(
prop("Name") == "With padding of zeros",
(slice( "⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿", 0, round(prop("% value") * 0.1) ) + slice( "⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀", 0, 10 - round(prop("% value") * 0.1) ) + " " + if(prop("% value") < 10, "00", if(prop("% value") < 100, "0", "" )) + if( prop("% value") == 0, "0", format(prop("% value")) ) + " %"),
if(
prop("Name") == "Without padding of zeros",
(slice( "⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿", 0, round(prop("% value") * 0.1) ) + slice( "⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀", 0, 10 - round(prop("% value") * 0.1) ) + " " + if( prop("% value") == 0, "0", format(prop("% value")) ) + " %"),
if(
prop("Name") == "Without % sign",
(slice( "⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿", 0, round(prop("% value") * 0.1) ) + slice( "⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀", 0, 10 - round(prop("% value") * 0.1) ) + " " + if(prop("% value") < 10, "00", if(prop("% value") < 100, "0", "" )) + if( prop("% value") == 0, "0", format(prop("% value")) )),
if(
prop("Name") == "Special start",
(if( prop("% value") == 0, "❌", slice( "⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿", 0, round(prop("% value") * 0.1) ) + slice( "⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀", 0, 10 - round(prop("% value") * 0.1) ) + " " + if(prop("% value") < 10, "00", if(prop("% value") < 100, "0", "" )) + if( prop("% value") == 0, "0", format(prop("% value")) ) )),
if(
prop("Name") == "Special end",
(if( prop("% value") == 100, "✅", slice( "⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿", 0, round(prop("% value") * 0.1) ) + slice( "⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀", 0, 10 - round(prop("% value") * 0.1) ) + " " + if(prop("% value") < 10, "00", if(prop("% value") < 100, "0", "" )) + if( prop("% value") == 0, "0", format(prop("% value")) ) )),
if(
prop("Name") == "Not full bar",
(slice( "⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿", 0, round(prop("% value") * 0.1) ) + " " + if(prop("% value") < 10, "00", if(prop("% value") < 100, "0", "" )) + if( prop("% value") == 0, "0", format(prop("% value")) )),
""
)
)
)
)
)
)
)
)
)3️⃣ Step 3: Generate your progress bar
Just having a number between 0 and 100 is not fun, let's add your progress bar !
💯 The generator
Bellow I've created a table that will generate your custom formula based on your choices !
| Name | progress | Progress bar preview | Generated Formula |
|---|---|---|---|
2 | 5 / 7 % | □□□□□□□□□□ | slice(\"■■■■■■■■■■\", 0, round(prop(\"% value\") * 0.1) )+slice(\"□□□□□□□□□□\", 0, 10 - round(prop(\"% value\") * 0.1) ) |
‣
Progress bar formula generator
‣
if(
length(prop("Full character")) != 1,
if(
length(prop("Full character")) > 1,
"⚠️ 'Full character' is too long",
"⚠️ 'Full character' not specified"
),
if(
prop("Show empty characters")
and
length(prop("Empty character")) != 1,
if(
length(prop("Empty character")) > 1,
"⚠️ 'Empty character' enabled but too long",
"⚠️ 'Empty character' enabled but not specified"
),
if(
not empty(prop("Custom text to show when % is at 0"))
and
prop("% value") <= 0,
prop("Custom text to show when % is at 0"),
if(
not empty(prop("Custom text to show when % is at 100"))
and
prop("% value") >= 100,
prop("Custom text to show when % is at 100"),
(
if(
prop("Show number at the start"),
(
if(
prop("Show padding of zeros"),
if(
prop("% value") < 10,
"00",
if(
prop("% value") < 100,
"0",
""
)
),
""
)
+
if(
prop("% value") == 0,
"0",
format(round(prop("% value")))
)
+
if(
prop("Show % sign after number"),
" % ",
" "
)
),
""
)
+
slice(
prop("Full character")
+ prop("Full character")
+ prop("Full character")
+ prop("Full character")
+ prop("Full character")
+ prop("Full character")
+ prop("Full character")
+ prop("Full character")
+ prop("Full character")
+ prop("Full character"),
0,
round(prop("% value") * 0.1)
)
+
if(
prop("Show empty characters"),
slice(
prop("Empty character")
+ prop("Empty character")
+ prop("Empty character")
+ prop("Empty character")
+ prop("Empty character")
+ prop("Empty character")
+ prop("Empty character")
+ prop("Empty character")
+ prop("Empty character")
+ prop("Empty character"),
0,
10 - round(prop("% value") * 0.1)
),
""
)
+
if(
prop("Show number at the end"),
(
" "
+
if(
prop("Show padding of zeros"),
if(
prop("% value") < 10,
"00",
if(
prop("% value") < 100,
"0",
""
)
),
""
)
+
if(
prop("% value") == 0,
"0",
format(round(prop("% value")))
)
+
if(
prop("Show % sign after number"),
" %",
""
)
),
""
)
)
)
)
)
)‣
if(
length(prop("Full character")) != 1,
if(
length(prop("Full character")) > 1,
"⚠️ 'Full character' is too long",
"⚠️ 'Full character' not specified"
),
if(
prop("Show empty characters")
and
length(prop("Empty character")) != 1,
if(
length(prop("Empty character")) > 1,
"⚠️ 'Empty character' enabled but too long",
"⚠️ 'Empty character' enabled but not specified"
),
replaceAll(
if(
not empty(prop("Custom text to show when % is at 0")),
(
"if(prop(\"% value\") <= 0,\""
+
prop("Custom text to show when % is at 0")
+
"\","
),
""
)
+
if(
not empty(prop("Custom text to show when % is at 100")),
(
"if(prop(\"% value\") >= 100,\""
+
prop("Custom text to show when % is at 100")
+
"\","
),
""
)
+
if(
prop("Show number at the start"),
(
if(
prop("Show padding of zeros"),
"if( prop(\"% value\") < 10, \"00\", if( prop(\"% value\") < 100, \"0\", \"\" ) )+",
""
)
+
"if( prop(\"% value\") == 0, \"0\", format(round(prop(\"% value\"))) )+"
+
if(
prop("Show % sign after number"),
"\" % \"",
"\" \""
)
+
"+"
),
""
)
+
(
"slice(\""
+ prop("Full character")
+ prop("Full character")
+ prop("Full character")
+ prop("Full character")
+ prop("Full character")
+ prop("Full character")
+ prop("Full character")
+ prop("Full character")
+ prop("Full character")
+ prop("Full character")
+ "\", 0, round(prop(\"% value\") * 0.1) )"
)
+
if(
prop("Show empty characters"),
"+slice(\""
+ prop("Empty character")
+ prop("Empty character")
+ prop("Empty character")
+ prop("Empty character")
+ prop("Empty character")
+ prop("Empty character")
+ prop("Empty character")
+ prop("Empty character")
+ prop("Empty character")
+ prop("Empty character")
+ "\", 0, 10 - round(prop(\"% value\") * 0.1) )",
""
)
+
if(
prop("Show number at the end"),
(
if(
prop("Show padding of zeros"),
"+\" \"+if( prop(\"% value\") < 10, \"00\", if( prop(\"% value\") < 100, \"0\", \"\" ) )+",
"+\" \"+"
)
+
"if( prop(\"% value\") == 0, \"0\", format(round(prop(\"% value\"))) )"
+
if(
prop("Show % sign after number"),
"+\" %\"",
""
)
),
""
)
+
if(
not empty(prop("Custom text to show when % is at 100")),
")",
""
)
+
if(
not empty(prop("Custom text to show when % is at 0")),
")",
""
),
"\\\"",
slice("\"", 1)
)
)
)🐥 Step by Step
‣
‣
% value column in your database‣
% valueCopied the one liner from 🔢 From two numbers
max( 0, min( 100, if( empty(prop("done")) or empty(prop("goal")), 0, round( prop("done") / prop("goal") * 100 ) ) ) )‣
% value‣
Progress bar formula generator
| Name | progress | Progress bar preview | Generated Formula |
|---|---|---|---|
2 | 5 / 7 % | □□□□□□□□□□ | slice(\"■■■■■■■■■■\", 0, round(prop(\"% value\") * 0.1) )+slice(\"□□□□□□□□□□\", 0, 10 - round(prop(\"% value\") * 0.1) ) |
‣
slice("■■■■■■■■■■", 0, round(prop("% value") * 0.1) )+slice("□□□□□□□□□□", 0, 10 - round(prop("% value") * 0.1) )‣
‣
% value column😢 Help me
Need more examples? Need more explanations? Have a specific need? Feel free to ask here if you need help !
👤 The author
Théry Fouchter
📝 Changelog
‣
- Added floating numbers for
% value⌨ From text
‣
- Step 1: Source of progress bar
- Step 2: Progress bar customization
- Step 3: Progress bar generator
- Step by Step tutorial