💯

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?

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

image

🖼 Enough talking, show me the goods

Progress bar formula generator

NameprogressProgress bar previewGenerated Formula

🤩 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
Formulas convertor
Formulas convertor
 (in
🔄
Notion shared convertors
) 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
‣
Regex

^[-+]?[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).
‣
One line
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")) ) ) ) )
‣
Expanded
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"))
			)
		)
	)
)

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
‣
One line
max( 0, min( 100, if( empty(prop("done")) or empty(prop("goal")), 0, round( prop("done") / prop("goal") * 100 ) ) ) )
‣
Expanded
max(
	0,
	min(
		100,
		if(
			empty(prop("done")) or empty(prop("goal")),
			0,
			round(
				prop("done") / prop("goal") * 100
			)
		)
	)
)

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
‣
One line
max( 0, min( 100, round( ( (prop("One") ? 1 : 0) + (prop("Two") ? 1 : 0) + (prop("Three") ? 1 : 0) ) * 100 / 3 ) ) )
‣
Expanded
max(
	0,
	min(
		100,
		round(
			(
				(prop("One") ? 1 : 0)
					+
				(prop("Two") ? 1 : 0)
					+
				(prop("Three") ? 1 : 0)
			)
			* 100 / 3
		)
	)
)

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
image
  • Select your relation
  • Select the checkbox's Done property
  • Calculate Percent checked
‣
Show
Progress from rollup
 % value 's formula
‣
One line
max( 0, min( 100, if( empty(prop("done")), 100, toNumber(prop("done")) * 100 ) ) )
‣
Expanded
max(
	0,
	min(
		100,
		if(
			empty(prop("done")),
			100,
			toNumber(prop("done")) * 100
		)
	)
)

Progress from rollup

Nametasksdone% value%
First
Second
,
100
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 %
First
Third
,
100
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 %
Third
Fifth
,
100
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 %
First
Second
Third
Fourth
Fifth
,
,
,
100
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 %
100
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 %

Progress from rollup (source)

NameDone

⌨ 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

This one is more magical with regexes,

‣
Regex
‣
^((\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 %
‣
One line
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 ) ) )
‣
Expanded
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
    )
  )
)

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!
‣
Sans-Serif
image
‣
Mono
image

🔣 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
‣
Progress custom displays
 %'s formula
if(
  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 !

image

Progress bar formula generator

NameprogressProgress bar previewGenerated Formula
‣
Progress bar formula generator
's formulas
‣
Progress bar preview
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"),
								" %",
								""
							)
						),
						""
					)
				)
			)
		)
	)
)
‣
Generated Formula
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

‣
Create your database
💭
Here I want a done / goal type progress.

Progress bar - 🐥1

Namedonegoal
0
10
6
10
10
10
‣
Add a % value column in your database

Progress bar - 🐥2

Namedonegoal% value
0
10
6
10
10
10
‣
Copy the formula for % value
💭
Copied 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 ) ) ) )
‣
Paste the formula for % value
💡
You should see the number of the percentage in the result of the formula!

Progress bar - 🐥3

Namedonegoal% value
0
10
0
6
10
60
10
10
100
‣
Generate your progress bar's formula above (in
Progress bar formula generator
)

Progress bar formula generator

NameprogressProgress bar previewGenerated Formula
‣
Copy your generated formula (click on the column / press escape / ctrl + c)
slice("■■■■■■■■■■", 0, round(prop("% value") * 0.1) )+slice("□□□□□□□□□□", 0, 10 - round(prop("% value") * 0.1) )
‣
Paste your generated formula in a new formula column in your database
💡
You should see progress bar!

Progress bar - 🐥4

Namedonegoal% value%
0
10
0
□□□□□□□□□□
6
10
60
■■■■■■□□□□
10
10
100
■■■■■■■■■■
‣
Rename and / or hide the % value column

Progress bar - 🐥5

Namedonegoal%
0
10
□□□□□□□□□□
6
10
■■■■■■□□□□
10
10
■■■■■■■■■■
‣
Done!

Progress bar - 🐥done

Namedonegoal%
0
10
□□□□□□□□□□
6
10
■■■■■■□□□□
10
10
■■■■■■■■■■

😢 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
Théry Fouchter

📝 Changelog

‣
v2 - @April 10, 2020 9:48 PM (GMT+2)
‣
v1 - @April 6, 2020 12:30 PM (GMT+2)
  • Step 1: Source of progress bar
  • Step 2: Progress bar customization
  • Step 3: Progress bar generator
  • Step by Step tutorial