- 👇 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🔢 From two numbers
Maybe you prefer a current number with a maximum number in mind?
% value 's formula☑️ From checkboxes
Have multiple checkboxes to fill?
% value 's formula🔍 From a rollup
How I see, you have advanced databases with relations.
done's rollup% value 's formula⌨ 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 formula| 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 formula3️⃣ 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 !
🐥 Step by Step
% value column in your database% value% value% value column