- 👇 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
🤩 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!
% 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.
🔢 From a number / text
The simplest, you write your percentage and boom a progress bar!
Works for both number or text column.
% 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?
% value
's formulamax( 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?
% value
's formulamax( 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.
done
's rollup- Select your relation
- Select the checkbox's
Done
property - Calculate
Percent checked
% value
's formulamax( 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.
% 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 | % |
---|---|---|---|
100 | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % | |
2 / 7 | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % | |
60 % | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % | |
0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % | ||
100 | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % | |
5 / 5 % | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % | |
25.8 | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % | |
78.2 % | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % | |
1.5 / 3 | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % | |
1 / 1.5 | 0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % | |
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?
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.
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) |
---|---|---|---|---|---|---|
Monospaced | █████▁▁▁▁▁
██████████
▁▁▁▁▁▁▁▁▁▁ | █ | ▁ | FULL BLOCK | LOWER ONE EIGHTH BLOCK | |
Monospaced | ⣿⣿⣿⣿⣿⣀⣀⣀⣀⣀
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ | ⣿ | ⣀ | BRAILLE PATTERN DOTS-12345678 | BRAILLE PATTERN DOTS-78 | |
Monospaced | •••••◦◦◦◦◦
••••••••••
◦◦◦◦◦◦◦◦◦◦ | • | ◦ | BULLET | WHITE BULLET | |
Monospaced | ⚫⚫⚫⚫⚫⚪⚪⚪⚪⚪
⚫⚫⚫⚫⚫⚫⚫⚫⚫⚫
⚪⚪⚪⚪⚪⚪⚪⚪⚪⚪ | ⚫ | ⚪ | MEDIUM BLACK CIRCLE | MEDIUM WHITE CIRCLE | |
Monospaced | ●●●●●○○○○○
●●●●●●●●●●
○○○○○○○○○○ | ● | ○ | BLACK CIRCLE | WHITE CIRCLE | |
Monospaced | ⚈⚈⚈⚈⚈⚆⚆⚆⚆⚆
⚈⚈⚈⚈⚈⚈⚈⚈⚈⚈
⚆⚆⚆⚆⚆⚆⚆⚆⚆⚆ | ⚈ | ⚆ | BLACK CIRCLE WITH WHITE DOT RIGHT | WHITE CIRCLE WITH DOT RIGHT | |
Monospaced | ⌧⌧⌧⌧⌧□□□□□
⌧⌧⌧⌧⌧⌧⌧⌧⌧⌧
□□□□□□□□□□ | ⌧ | □ | X IN A RECTANGLE BOX | WHITE SQUARE | |
Monospaced | +++++−−−−−
++++++++++
−−−−−−−−−− | + | − | PLUS SIGN | MINUS SIGN | |
Monospaced | ▮▮▮▮▮▯▯▯▯▯
▮▮▮▮▮▮▮▮▮▮
▯▯▯▯▯▯▯▯▯▯ | ▮ | ▯ | BLACK VERTICAL RECTANGLE | WHITE VERTICAL RECTANGLE | |
Monospaced | ■■■■■□□□□□
■■■■■■■■■■
□□□□□□□□□□ | ■ | □ | BLACK SQUARE | WHITE SQUARE | |
Monospaced | ✦✦✦✦✦✧✧✧✧✧
✦✦✦✦✦✦✦✦✦✦
✧✧✧✧✧✧✧✧✧✧ | ✦ | ✧ | BLACK FOUR POINTED STAR | WHITE FOUR POINTED STAR | |
Monospaced | ★★★★★☆☆☆☆☆
★★★★★★★★★★
☆☆☆☆☆☆☆☆☆☆ | ★ | ☆ | BLACK STAR | WHITE STAR | |
Monospaced (Mono) | █████░░░░░
██████████
░░░░░░░░░░ | █ | ░ | FULL BLOCK | LIGHT SHADE | |
Monospaced (Mono) | ▰▰▰▰▰▱▱▱▱▱
▰▰▰▰▰▰▰▰▰▰
▱▱▱▱▱▱▱▱▱▱ | ▰ | ▱ | BLACK PARALLELOGRAM | WHITE PARALLELOGRAM | |
Alone | ∣∣∣∣∣∣∣∣∣∣ | ∣ | DIVIDES | |||
Alone | .......... | . | FULL STOP | |||
Alone | ·········· | · | MIDDLE DOT | |||
Alone | ◉◉◉◉◉◉◉◉◉◉ | ◉ | FISHEYE | |||
Alone | —————————— | — | EM DASH | |||
Alone | −−−−−−−−−− | − | MINUS SIGN | |||
Alone | ---------- | - | HYPHEN-MINUS | |||
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.
Name | progress | % |
---|---|---|
100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ | |
100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ | |
100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ | |
100 | 100 % ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ | |
100 | 100 % ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ | |
100 | 100 % ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ | |
0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % | |
30 | ⣿⣿⣿⣀⣀⣀⣀⣀⣀⣀ 030 % | |
100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 % | |
0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 % | |
30 | ⣿⣿⣿⣀⣀⣀⣀⣀⣀⣀ 030 % | |
100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 % | |
100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 % | |
100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 % | |
100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 % | |
0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 | |
30 | ⣿⣿⣿⣀⣀⣀⣀⣀⣀⣀ 030 | |
100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 | |
100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 | |
100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 | |
100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 | |
0 | ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 | |
30 | ⣿⣿⣿⣀⣀⣀⣀⣀⣀⣀ 030 | |
100 | ✅ | |
0 | 000 | |
30 | ⣿⣿⣿ 030 | |
100 | ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 |
%
'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 !
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% value
max( 0, min( 100, if( empty(prop("done")) or empty(prop("goal")), 0, round( prop("done") / prop("goal") * 100 ) ) ) )
% value
slice("■■■■■■■■■■", 0, round(prop("% value") * 0.1) )+slice("□□□□□□□□□□", 0, 10 - round(prop("% value") * 0.1) )
% value
column😢 Help me
👤 The author
📝 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