Notion Templates
Notion Templates/
All Templates
All Templates/
17 Progress Bar Designs
17 Progress Bar Designs
17 Progress Bar Designs

17 Progress Bar Designs

Master Tag
Tips & Tricks
Created
Jun 4, 2021 10:15 PM
How It Works
https://www.redgregory.com/notion/2021/6/4/17-progress-bar-designs-in-notion
Usage
dateBetween
empty
Format
floor
Slice
Web Tags
Formula
Design
Database
Alternatives
⌨️
Slider Progress Bar Use-Cases
Cover
17 Progress Bar Designs (1).png

Donate

✂️
What you'll need: 1 property called "Read" and another called "Total Pages". You can change the names of these properties after pasting the formula.
Classic Progress Bar
Name
Read
Total Pages
Classic Slider
Diamond
Loading
Block
Bold Bars
Progress Bar
75
100
Progress Bar
34
34
Progress Bar
34
76
Progress Bar
54
57
Progress Bar
14
47
Progress Bar
32
87
Progress Bar
19
30
Progress Bar
64
156
Progress Bar
32
90
Progress Bar
13
38
Classic Progress Bar Formulas
1-5

Classic Slider

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("——————————", 0, floor(10 * prop("Read") / prop("Total Pages"))) + "●" + slice("——————————", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Diamond

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("◆◆◆◆◆◆◆◆◆◆", 0, floor(10 * prop("Read") / prop("Total Pages"))) + "" + slice("◇◇◇◇◇◇◇◇◇◇", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Loading

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("▒▒▒▒▒▒▒▒▒▒", 0, floor(10 * prop("Read") / prop("Total Pages"))) + "|" + slice("░░░░░░░░░░", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Block

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("■■■■■■■■■■", 0, floor(10 * prop("Read") / prop("Total Pages"))) + slice("□□□□□□□□□□", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Bold Bars

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("▌▌▌▌▌▌▌▌▌▌", 0, floor(10 * prop("Read") / prop("Total Pages"))) + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")
6-10

Cube

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("❒❒❒❒❒❒❒❒❒❒", 0, floor(10 * prop("Read") / prop("Total Pages"))) + " ■ " + slice("❒❒❒❒❒❒❒❒❒❒", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Thin Bars Slider

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("||||||||||||||||||||", 0, floor(20 * prop("Read") / prop("Total Pages"))) + "🁢" + slice("||||||||||||||||||||", 0, 20 - floor(20 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Thin Bars

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("||||||||||||||||||||", 0, floor(20 * prop("Read") / prop("Total Pages"))) + "🁢 " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Lines

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("▮▮▮▮▮▮▮▮▮▮", 0, floor(10 * prop("Read") / prop("Total Pages"))) + slice("▯▯▯▯▯▯▯▯▯▯", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Plain Circle

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("⭘⭘⭘⭘⭘⭘⭘⭘⭘⭘", 0, floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")
11-14

Raised Disk Slider

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("❍❍❍❍❍❍❍❍❍❍", 0, floor(10 * prop("Read") / prop("Total Pages"))) + "●" + slice("❍❍❍❍❍❍❍❍❍❍", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Floating Slider

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("▁▁▁▁▁▁▁▁▁▁", 0, floor(10 * prop("Read") / prop("Total Pages"))) + "▅" + slice("▁▁▁▁▁▁▁▁▁▁", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

8-Bit

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("▄▄▄▄▄▄▄▄▄▄", 0, floor(10 * prop("Read") / prop("Total Pages"))) + "▀" + slice("▄▄▄▄▄▄▄▄▄▄", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Dotted

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("፨፨፨፨፨፨፨፨፨፨", 0, floor(10 * prop("Read") / prop("Total Pages"))) + "჻ " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")
15-17

Bubbles

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("⬤⬤⬤⬤⬤⬤⬤⬤⬤⬤", 0, floor(10 * prop("Read") / prop("Total Pages"))) + slice("◯◯◯◯◯◯◯◯◯◯", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Lite-Floating Slider

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("__________", 0, floor(10 * prop("Read") / prop("Total Pages"))) + "▃" + slice("__________", 0, 10 - floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")

Levels

if(not empty(prop("Read")) and not empty(prop("Total Pages")), slice("⠤⠴⠾⠿⠿⠿⠿⠿⠿⠿", 0, floor(10 * prop("Read") / prop("Total Pages"))) + " " + format(floor(100 * prop("Read") / prop("Total Pages"))) + "%", "")
 
✂️
What you'll need: 1 property called "Start Date" and another called "End Date". You can change the names of these properties after pasting the formula.
Date Progress Bar
Name
Start Date
End Date
Classic Slider
Diamond
Loading
Block
Bold Bars
Deadline
May 18, 2021
Aug 25, 2021
Deadline
May 16, 2021
Jun 12, 2021
Deadline
Jun 1, 2021
Aug 31, 2021
Deadline
May 12, 2021
Jul 7, 2021
Deadline
May 18, 2021
Sep 16, 2021
Date Progress Bar Formulas
1-5

Classic Slider

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "●—————————— 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("——————————", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "●" + slice("——————————", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "——————————● 100%")), "")

Diamond

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "◇◇◇◇◇◇◇◇◇◇ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("◆◆◆◆◆◆◆◆◆◆", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + slice("◇◇◇◇◇◇◇◇◇◇", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "◆◆◆◆◆◆◆◆◆◆ 100%")), "")

Loading

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "|░░░░░░░░░░ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("▒▒▒▒▒▒▒▒▒▒", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "|" + slice("░░░░░░░░░░", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "▒▒▒▒▒▒▒▒▒▒| 100%")), "")

Block

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "⃞⃞⃞⃞⃞⃞⃞⃞⃞⃞ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("■■■■■■■■■■", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + slice("□□□□□□□□□□", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "■■■■■■■■■■ 100%")), "")

Bold Bars

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("▌▌▌▌▌▌▌▌▌▌", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "▌▌▌▌▌▌▌▌▌▌ 100%")), "")
6-10

Cube

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, " ■ ❒❒❒❒❒❒❒❒❒❒ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("❒❒❒❒❒❒❒❒❒❒", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " ■ " + slice("❒❒❒❒❒❒❒❒❒❒", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "❒❒❒❒❒❒❒❒❒❒ ■  100%")), "")

Thin Bars Slider

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "🁢|||||||||||||||||||| 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("||||||||||||||||||||", 0, floor(20 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "🁢" + slice("||||||||||||||||||||", 0, 20 - floor(20 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "||||||||||||||||||||🁢 100%")), "")

Thin Bars

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("||||||||||||||||||||", 0, floor(20 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "🁢 " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "|||||||||||||||||||| 100%")), "")

Lines

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "▯▯▯▯▯▯▯▯▯▯ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("▮▮▮▮▮▮▮▮▮▮", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + slice("▯▯▯▯▯▯▯▯▯▯", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "▮▮▮▮▮▮▮▮▮▮  100%")), "")

Plain Circle

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("⭘⭘⭘⭘⭘⭘⭘⭘⭘⭘", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "⭘⭘⭘⭘⭘⭘⭘⭘⭘⭘ 100%")), "")
11-14

Raised Disk Slider

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "●❍❍❍❍❍❍❍❍❍❍ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("❍❍❍❍❍❍❍❍❍❍", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "●" + slice("❍❍❍❍❍❍❍❍❍❍", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "❍❍❍❍❍❍❍❍❍❍● 100%")), "")

Floating Slider

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "▅▁▁▁▁▁▁▁▁▁▁ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("▁▁▁▁▁▁▁▁▁▁", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "▅" + slice("▁▁▁▁▁▁▁▁▁▁", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "▁▁▁▁▁▁▁▁▁▁▅ 100%")), "")

8-Bit

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "▀▄▄▄▄▄▄▄▄▄▄ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("▄▄▄▄▄▄▄▄▄▄", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "▀" + slice("▄▄▄▄▄▄▄▄▄▄", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "▄▄▄▄▄▄▄▄▄▄▀ 100%")), "")

Dotted

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("፨፨፨፨፨፨፨፨፨፨", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "჻ " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "፨፨፨፨፨፨፨፨፨፨ 100%")), "")
 
15-17

Bubbles

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "◯◯◯◯◯◯◯◯◯◯ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("⬤⬤⬤⬤⬤⬤⬤⬤⬤⬤", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + slice("◯◯◯◯◯◯◯◯◯◯", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "⬤⬤⬤⬤⬤⬤⬤⬤⬤⬤ 100%")), "")

Lite Floating Slider

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "▃__________ 0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("__________", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "▃" + slice("__________", 0, 10 - floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "__________▃ 100%")), "")

Levels

if(not empty(prop("Start Date")) and not empty(prop("End Date")), if(dateBetween(prop("Start Date"), now(), "days") > 0, "0%", if(dateBetween(prop("End Date"), now(), "days") > -1, slice("⠤⠴⠾⠿⠿⠿⠿⠿⠿⠿", 0, floor(10 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + " " + format(floor(100 * dateBetween(now(), prop("Start Date"), "days") / dateBetween(prop("End Date"), prop("Start Date"), "days"))) + "%", "⠤⠴⠾⠿⠿⠿⠿⠿⠿⠿ 100%")), "")