💯

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

Progress bar formula generator

NameprogressProgress bar previewGenerated Formula
2
5 / 7 %
□□□□□□□□□□
slice(\"■■■■■■■■■■\", 0, round(prop(\"% value\") * 0.1) )+slice(\"□□□□□□□□□□\", 0, 10 - round(prop(\"% value\") * 0.1) )

🤩 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
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
0
⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 %
3
10
0
⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 %
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%
2
⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 002 %
1
⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 001 %
0
⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 000 %
1
⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 001 %

🔍 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%
1
,
100
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 %
2
,
100
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 %
3
,
100
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 %
4
,
,
,
100
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ 100 %
5
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

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%
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!
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)
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

Nameprogress%
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
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
2
5 / 7 %
□□□□□□□□□□
slice(\"■■■■■■■■■■\", 0, round(prop(\"% value\") * 0.1) )+slice(\"□□□□□□□□□□\", 0, 10 - round(prop(\"% value\") * 0.1) )
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
zero
0
10
sixty
6
10
hundred
10
10
Add a % value column in your database

Progress bar - 🐥2

Namedonegoal% value
zero
0
10
sixty
6
10
hundred
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
zero
0
10
0
sixty
6
10
1
hundred
10
10
100
Generate your progress bar's formula above (in
Progress bar formula generator
)

Progress bar formula generator

NameprogressProgress bar previewGenerated Formula
2
5 / 7 %
□□□□□□□□□□
slice(\"■■■■■■■■■■\", 0, round(prop(\"% value\") * 0.1) )+slice(\"□□□□□□□□□□\", 0, 10 - round(prop(\"% value\") * 0.1) )
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%
zero
0
10
0
□□□□□□□□□□
sixty
6
10
1
□□□□□□□□□□
hundred
10
10
100
■■■■■■■■■■
Rename and / or hide the % value column

Progress bar - 🐥5

Namedonegoal%
zero
0
10
□□□□□□□□□□
sixty
6
10
□□□□□□□□□□
hundred
10
10
■■■■■■■■■■
Done!

Progress bar - 🐥done

Namedonegoal%
zero
0
10
□□□□□□□□□□
sixty
6
10
□□□□□□□□□□
hundred
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