Database, Design

17 Progress Bar Designs For Your Notion Database

Sarah Brennan ยท

17 Progress Bar Designs-notion.png

โ—‰ Progress Design

The following are 17 progress bar designs built with Notion formulas. These designs are transferable to any Notion database in addition to only two required properties as explained below. These minimal designs are a variety of sliders and classic progress bars. Feel free to explore different designs with the two frameworks provided.

2022-2023 Calendars

A bundle of calendar images for Notion galleries that span from Sep 2022 to Dec 2023 + more!

Claim Your Copy

The Two Frameworks: Numerical and Date Progress

Numerical: find the progress between two numbers. For example, finding the progress of reading a book between one number (total pages) and another (pages read).

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.

notion-progress-book.png

Date: find the progress between two dates in relation to today. The two properties required for this progress bar is a start date and an end date.

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-notion.png
Screen Shot 2021-06-05 at 2.03.03 PM.png

All progress bars are tested with the default font. Other fonts may look different.

The following examples are only for numerical progress bars. See link below for the same progress bars for date.

 

1. Classic Slider Formula

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"))) + "%", "")

Screen Shot 2021-06-05 at 2.25.11 PM.png
 

2. Diamond Progress Formula

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"))) + "%", "")

Screen Shot 2021-06-05 at 2.30.15 PM.png
 

3. Loading Slider Formula

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"))) + "%", "")

Screen Shot 2021-06-05 at 2.31.51 PM.png
 

4. Block Progress Formula

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"))) + "%", "")

Screen Shot 2021-06-05 at 2.33.13 PM.png
 

5. Bold Bars Progress Formula

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"))) + "%", "")

Screen Shot 2021-06-05 at 2.35.43 PM.png
 

6. Cube Slider Formula

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"))) + "%", "")

Screen Shot 2021-06-05 at 2.36.42 PM.png
 

7. Thin Bars Slider Formula

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"))) + "%", "")

Screen Shot 2021-06-05 at 2.39.54 PM.png
 

8. Thin Bars Progress Formula

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"))) + "%", "")

Screen Shot 2021-06-05 at 2.41.43 PM.png
 

9. Lines Progress Formula

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"))) + "%", "")

Screen Shot 2021-06-05 at 2.44.53 PM.png
 

10. Plain Circle Progress Formula

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"))) + "%", "")

Screen Shot 2021-06-05 at 2.46.34 PM.png
 

11. Raised Disk Slider Formula

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"))) + "%", "")

Screen Shot 2021-06-05 at 2.50.13 PM.png
 

12. Floating Slider Formula

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"))) + "%", "")

Screen Shot 2021-06-05 at 2.52.45 PM.png
 

13. 8-Bit Slider Formula

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"))) + "%", "")

Screen Shot 2021-06-05 at 2.53.33 PM.png
 

14. Dotted Progress Formula

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"))) + "%", "")

Screen Shot 2021-06-05 at 2.54.52 PM.png
 

15. Bubbles Progress Formula

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"))) + "%", "")

Screen Shot 2021-06-05 at 2.55.58 PM.png
 

16. Lite Floating Slider Formula

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"))) + "%", "")

Screen Shot 2021-06-05 at 3.01.47 PM.png
 

17. Levels Progress Formula

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"))) + "%", "")

Screen Shot 2021-06-05 at 3.02.54 PM.png
 

Further Reading

Featured
Notion For Note-Taking: Where To Start

There are many reasons why Notion is a great note-taking app. For starters, it's extremely user-friendly and easy to use. The interface is clean and simple, making it quick and easy to find what you're looking for. There are also tons of features and customization options available, so you can tailor the app to your specific needs. Here is how you can get started.

How To Use Notion: Relation Property (2022)

Are you new to Notion and want to learn more about everything the program has to offer? The relation property is an important feature for users who want to create efficient workflows and relationships between multiple database entries. Below is a tutorial on how to use the relation property and what you should keep in mind before using it.

How To Create A Synced Block Index Page In Notion

Create an index page in Notion without using a database. Instead, use the synced block feature. Synced blocks allow Notion users to share and edit a single block across multiple pages. For example, you can create a synced block in one page, then copy and paste that block to five other pages, and finally edit any block to update all six. Hereโ€™s how to use the feature to collect blocks in an index.

How To Design And Publish An Article With Notion

Notion is a fantastic tool for blog building, landing pages, and article publishing. Here is an example of a short article I published about building in public in Notion. In it, there are different formatting choices, blocks types, and widgets to bring everything together.