💯

Notion - Progress Bars Generator

Created
Apr 11, 2020 3:22 PM
Tags

👇 Hey you, do you want progress bars in your Notion database?

This page will guide you on how to create your custom progress bar!

image

🖼 Enough talking, show me the goods

🤩 Okay I'm in, how do you do this?

You have roughly 3 steps to success:

  1. Defining what you want to show the progress of
  2. You'll first create a column named "% value" in your database to "extract" the percentage of your progress bar.

  3. Customising the progress bar
  4. Before creating the progress bar, you'll see the customisation options of the generator.

  5. Generating the formula
  6. 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 (in ) to convert this code to be understandable by Notion (Notion doesn't like line endings!).
💬
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.

Show Progress from number % value 's formula

Progress from number

Nameprogress% value%

30

0

⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 %

60

0

⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 %

0

⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 %

100

0

⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 %

090

0

⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 %

-20

0

⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 %

🔢 From two numbers

Maybe you prefer a current number with a maximum number in mind?

Show Progress from two numbers % value 's formula

Progress from two numbers

Namedonegoal% value%
1
7
14

⣿⣀⣀⣀⣀⣀⣀⣀⣀⣀ 014 %

3
10
30

⣿⣿⣿⣀⣀⣀⣀⣀⣀⣀ 030 %

0

⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 %

5
5
100

⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 %

☑️ From checkboxes

Have multiple checkboxes to fill?

Show Progress from checkboxes % value 's formula

Progress from checkboxes

NameOneTwoThree% value%
33

⣿⣿⣿⣀⣀⣀⣀⣀⣀⣀ 033 %

67

⣿⣿⣿⣿⣿⣿⣿⣀⣀⣀ 067 %

0

⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 %

100

⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 %

🔍 From a rollup

How I see, you have advanced databases with relations.

Show Progress from rollup done's rollup
Show Progress from rollup % value 's formula

Progress from rollup

Nametasksdone% value%
100

⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 %

100

⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 %

100

⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 %

100

⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 %

100

⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 %

Progress from rollup (source)

⌨ 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.

Show Progress from text % value 's formula

Progress from text

Nameprogress% 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?

📌
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!

📷 Toggle me for screenshots!

🔣 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

Progress characters

NameTypeCharactersFullEmptyFull (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.

💬
Want a new custom display? Feel free to comment here and I will what I can do!

Progress custom displays

Nameprogress%
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

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 !

image
's formulas

🐥 Step by Step

Create your database
Add a % value column in your database
Copy the formula for % value
Paste the formula for % value
Generate your progress bar's formula above (in )
Copy your generated formula (click on the column / press escape / ctrl + c)
Paste your generated formula in a new formula column in your database
Rename and / or hide the % value column
Done!

😢 Help me

💬
Need more examples? Need more explanations? Have a specific need? Feel free to ask here if you need help !

👤 The author

📝 Changelog

v2 - @April 10, 2020 9:48 PM (GMT+1)
v1 - @April 6, 2020 12:30 PM (GMT+1)