💯

Notion - Progress Bars Generator

Created
Apr 11, 2020 3:22 PM
Tags
Harry's Home
Harry's Home
  • 👇 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!

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.

  2. Customising the progress bar

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

  3. Generating the formula

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

Name
progress
% 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

Name
done
goal
% 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

Name
One
Two
Three
% 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

Name
tasks
done
% value
%
1
FirstSecond
100

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

2
FirstThird
100

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

3
ThirdFifth
100

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

4
FirstSecondThirdFourthFifth
100

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

5
100

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

Progress from rollup (source)

Name
Done
First
Second
Third
Fourth
Fifth

⌨ 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

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!

‣
📷 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

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!

Progress custom displays

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 formula

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+2)
‣
v1 - @April 6, 2020 12:30 PM (GMT+2)