Check out several Notion Progress Bar designs to add to your database.
Are you looking for different Notion progress bar designs to add to your database?
Progress bars in Notion are a great way to visualize your numerical data and get the information you need just by glancing over.
In this article, we will go through different types of progress bar design formulas and how you can add or change them to your Notion templates using simple codes.
We’ll also go over how to use the new built-in progress bar, which doesn’t require any complicated formulas.
Table of Content
Table of Content
20 Types of Notion Progress Bar Designs and How to Use Them
When it comes to progress bars in Notion, one of the common myths is the complications with code. It is common if you do not know anything about coding and are totally new to it.
This is why we’re here discussing 20 different Notion Progress Bar designs and their codes so you don’t have to deal with writing code from scratch.
The progress bars that I am about to show below work with the Number and Date property. Your database either needs to have a number property or the date property to output the progress bar design.
For numbers, you need two parameters: total and current numbers and the difference between these two is the progress value. We’ll use “Income Goal” and “Earned” as an example for this tutorial.
Similarly, for the date property, you’ll need two parameters: end date and start date, and the difference between these two gives you progress when having deadlines.
The name of the property in both Numerical and Date Progress is used for reference purposes and can be changed in the actual code as per your purpose or the kind of progress bar you need.
Now that we’ve understood the background, let’s check different types of Notion Progress Bar designs and their formulas.
1. Classic Slider
The classic slider progress bar is one of the best fits when you are customizing or creating templates that have task management or tracking. For instance, you can have the classic slider on templates such as goal tracker, book reading progress, or a to-do list.
For example, if your goal is to earn $100k this year and you’ve already earned $75k, the classic slider will show you 75% as income progress. Here, the parameters are Earned (75) and Income Goal (100).
Formula
Numerical Property Formula
if(not empty(prop("Earned")) and not empty(prop("Income Goal")), slice("——————————", 0, floor(10 * prop("Earned") / prop("Income Goal"))) + "●" + slice("——————————", 0, 10 - floor(10 * prop("Earned") / prop("Income Goal"))) + " " + format(floor(100 * prop("Earned") / prop("Income Goal"))) + "%", "")Date Property Formula
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%")), "")2. Diamond Progress Formula
The diamond progress bar is one of the classic progress bars that can be used in templates focused on tracking progress with reading books or doing a task.
Likewise to the classic progress bar, you can use it on various templates such as a goal, book, or habit tracker, task management, and general dashboards.
Compared to the classic bar, this is more vibrant and attention-catching.
Formula
Numerical Property Formula
if(not empty(prop("Earned")) and not empty(prop("Income Goal")), slice("◆◆◆◆◆◆◆◆◆◆", 0, floor(10 * prop("Earned") / prop("Income Goal"))) + "" + slice("◇◇◇◇◇◇◇◇◇◇", 0, 10 - floor(10 * prop("Earned") / prop("Income Goal"))) + " " + format(floor(100 * prop("Earned") / prop("Income Goal"))) + "%", "")Date Property Formula
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%")), "")3. Arrowhead Progress Bar
Arrowheads are similar to a cube, diamond, circle, and star progress bar with a clear sense of progressive habits that you are building. It is uncommon to find an arrowhead progress bar on Notion pages, but it also makes it unique when you use them.
Formula
Numerical Property Formula
if(not empty(prop("Earned")) and not empty(prop("Income Goal")), slice("►►►►►►►►►►", 0, floor(10 * prop("Earned") / prop("Income Goal"))) + "" + slice("▷▷▷▷▷▷▷▷▷▷", 0, 10 - floor(10 * prop("Earned") / prop("Income Goal"))) + " " + format(floor(100 * prop("Earned") / prop("Income Goal"))) + "%", "")Date Property Formula
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%")), "")4. Loading Progress Bar
A loading progress bar is one of the best ways to visualize how much of the task is being completed. They have a unique design that provides a sense of progress and confidence in completing all of your tasks. This is why they are frequently used in templates that are fun and personal.
Formula
Numerical Property Formula
if(not empty(prop("Earned")) and not empty(prop("Income Goal")), slice("▒▒▒▒▒▒▒▒▒▒", 0, floor(10 * prop("Earned") / prop("Income Goal"))) + "|" + slice("░░░░░░░░░░", 0, 10 - floor(10 * prop("Earned") / prop("Income Goal"))) + " " + format(floor(100 * prop("Earned") / prop("Income Goal"))) + "%", "")Date Property Formula
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%")), "")5. Block Progress Bar
Block Progress Bar is a great option if you’re looking for a design that looks professional and bold. The black-filled boxes denote the progress you’ve made, which is clearly highlighted. This progress bar is a great choice for those who want a simple, yet effective way to track their progress.
Formula
Numerical Property Formula
if(not empty(prop("Earned")) and not empty(prop("Income Goal")), slice("■■■■■■■■■■", 0, floor(10 * prop("Earned") / prop("Income Goal"))) + slice("□□□□□□□□□□", 0, 10 - floor(10 * prop("Earned") / prop("Income Goal"))) + " " + format(floor(100 * prop("Earned") / prop("Income Goal"))) + "%", "")Date Property Formula
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%")), "")6. Bold Lines Progress Bar
The Bold Lines progress bar design is distinct from those seen previously. It uses standing lines to represent your progress, and the number at the end gives you the exact value. It is best suited for templates like task management, to-do lists, and generic dashboards.
Due to the design, it also fits well in aesthetic dashboard templates allowing a more clean and uncluttered progress bar.
Formula
Numerical Property Formula
if(not empty(prop("Earned")) and not empty(prop("Income Goal")), slice("▌▌▌▌▌▌▌▌▌▌", 0, floor(10 * prop("Earned") / prop("Income Goal"))) + format(floor(100 * prop("Earned") / prop("Income Goal"))) + "%", "")Date Property Formula
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%")), "")7. Star Progress Bar
The Star progress bar is one of the best options when you need to have a Notion page for reviewing products or services. It gives a great visualization and offers better clarity of the quality.
Often used only for reviewing products, the Notion star progress bar can also be used for self-evaluation. For instance, if you need to grade your employee’s performance for various services and tasks, the star progress bar can be a great option.
Formula
Numerical Property Formula
if(not empty(prop("Earned")) and not empty(prop("Income Goal")), slice("★★★★★★★★★★", 0, floor(10 * prop("Earned") / prop("Income Goal"))) + slice("☆☆☆☆☆☆☆☆☆☆", 0, 10 - floor(10 * prop("Earned") / prop("Income Goal"))) + " " + format(floor(100 * prop("Earned") / prop("Income Goal"))) + "%", "")Date Property Formula
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. Cube Slider Progress Bar
Though not often used, the Cube Slider progress bar is still one of the unique progress bars to have on your Notion template. Unlike the other progress bars, the cube slider only fills the box where you currently progressed and not all the cubes at the back.
This makes the Cube Slider progress bar one of the aesthetically beautiful and also useful progress bars to have on your Notion templates.
Here, it is best to use the numerical framework such as book trackers, goals and task management, and to-do lists.
Formula
Numerical Property Formula
if(not empty(prop("Earned")) and not empty(prop("Income Goal")), slice("❒❒❒❒❒❒❒❒❒❒", 0, floor(10 * prop("Earned") / prop("Income Goal"))) + " ■ " + slice("❒❒❒❒❒❒❒❒❒❒", 0, 10 - floor(10 * prop("Earned") / prop("Income Goal"))) + " " + format(floor(100 * prop("Earned") / prop("Income Goal"))) + "%", "")Date Property Formula
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%")), "")9. Thin Bars Slider
Thin Bar progress is similar to the Bold Lines Progress Bar, and instead of the bold bars, you can find thin bars to track your progress. Due to the design, it also fits well in aesthetic dashboard templates allowing a more clean and uncluttered progress bar.
Formula
For some weird reason, my website isn’t allowing me to embed the code for the Thin Bars Slider Progress Bar. You can find the code for both the numerical and date property by clicking the below button.
10. Thin Bars Progress
Thin Bars Progress has the same design as the previous one, with the exception that lines fill out until the progress you’ve made rather than full. The thin bar progress can be used on various templates that don’t attract too much attention to them.
Formula
For some weird reason, my website isn’t allowing me to embed the code for the Thin Bars Progress Bar. You can find the code for both the numerical and date property by clicking the below button.
11. Line Progress Design
The line progress bar design is similar to the diamond progress bar and is best for tracking goals and task progress. These are best for tracking the progress of reading books or doing a task, or managing projects.
Formula
Numerical Property Formula
if(not empty(prop("Earned")) and not empty(prop("Income Goal")), slice("▮▮▮▮▮▮▮▮▮▮", 0, floor(10 * prop("Earned") / prop("Income Goal"))) + slice("▯▯▯▯▯▯▯▯▯▯", 0, 10 - floor(10 * prop("Earned") / prop("Income Goal"))) + " " + format(floor(100 * prop("Earned") / prop("Income Goal"))) + "%", "")Date Property Formula
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%")), "")12. Emoji Progress Bar
One of the coolest additions to your Notion page is having a modern and more millennial emoji set of a progress bar. These are perfect for personal Notion pages where you track your meal, book reading, or things that are more personal to you over professional entries.
Emoji Progress Bar is also great for mood tracker templates as it acts as a little motivative push and helps you achieve your goal.
For instance, if you are using a fitness tracker with an emoji progress bar in it with “fitness emoticons,” these can make small efforts to keep you motivated with the number of days you have been following the fitness routine.
Similarly, it works for all kinds of tracking with a cool look and smaller fractions of motivations. Other examples include a diet tracker, book reading habit building, work tracking, and much more. You can use any icon to make the Notion page funkier and personal.
Formula
Numerical Property Formula
if(prop("Earned") / prop("Income Goal") >= 1, "✅", replaceAll(slice("xxxxxxxxxx", 0, floor(prop("Earned") / prop("Income Goal") * 10)), "x", "😄") + replaceAll(slice("xxxxxxxxxx", 0, ceil(10 - prop("Earned") / prop("Income Goal") * 10)), "x", "😡") + " " + format(floor(prop("Earned") / prop("Income Goal") * 100)) + "%")Date Property Formula
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%")), "")Note: You can change the emoticons to suit your needs or match the theme of your Notion page.
13. Plain Circle Progress Bar
This has to be the most minimalistic and appealing progress bar for Notion templates. The empty circular design gives it a very subtle look making it perfect for minimal and aesthetic templates.
Formula
Numerical Property Formula
if(not empty(prop("Earned")) and not empty(prop("Income Goal")), slice("⭘⭘⭘⭘⭘⭘⭘⭘⭘⭘", 0, floor(10 * prop("Earned") / prop("Income Goal"))) + " " + format(floor(100 * prop("Earned") / prop("Income Goal"))) + "%", "")Date Property Formula
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%")), "")14. Raised Disk Slider Progress Bar
Likewise to the Cube and Thin Slider progress bar, Raised Disk Slider is just the perfect progress bar design to create an intriguing progress bar for your Notion template. You can use these on templates to give them a one-of-a-kind appearance.
Formula
Numerical Property Formula
if(not empty(prop("Earned")) and not empty(prop("Income Goal")), slice("❍❍❍❍❍❍❍❍❍❍", 0, floor(10 * prop("Earned") / prop("Income Goal"))) + "●" + slice("❍❍❍❍❍❍❍❍❍❍", 0, 10 - floor(10 * prop("Earned") / prop("Income Goal"))) + " " + format(floor(100 * prop("Earned") / prop("Income Goal"))) + "%", "")Date Property Formula
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%")), "")15. Floating Slider Progress Bar
This is an interesting progress bar design that is mostly unknown to most of the users, and they end up missing this. Interestingly, the progress bar slides as you complete your work and is best when used with a date progress framework.
Formula
Numerical Property Formula
if(not empty(prop("Earned")) and not empty(prop("Income Goal")), slice("▁▁▁▁▁▁▁▁▁▁", 0, floor(10 * prop("Earned") / prop("Income Goal"))) + "▅" + slice("▁▁▁▁▁▁▁▁▁▁", 0, 10 - floor(10 * prop("Earned") / prop("Income Goal"))) + " " + format(floor(100 * prop("Earned") / prop("Income Goal"))) + "%", "")Date Property Formula
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%")), "")16. 8-Bit Slider Progress Bar
The most uncommon progress bar on the list, the 8-bit slider progress bar, is something to be most loved by code learners and tech project managers.
The 8-Bit Slider progress bar uses both the numerical and date progress frameworks, so you can have them on any kind of template.
Formula
Numerical Property Formula
if(not empty(prop("Earned")) and not empty(prop("Income Goal")), slice("▄▄▄▄▄▄▄▄▄▄", 0, floor(10 * prop("Earned") / prop("Income Goal"))) + "▀" + slice("▄▄▄▄▄▄▄▄▄▄", 0, 10 - floor(10 * prop("Earned") / prop("Income Goal"))) + " " + format(floor(100 * prop("Earned") / prop("Income Goal"))) + "%", "")Date Property Formula
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%")), "")17. Dotted Progress Bar
If you are interested in the aesthetic dashboard or journal-related templates, the Dotted Progress Bar is just the right one to use.
You can find an uncommon dotted pattern as you progress with your tasks, and it uses both frameworks. So, you can always use it when you want to create a different style on your Notion template.
Formula
Numerical Property Formula
if(not empty(prop("Earned")) and not empty(prop("Income Goal")), slice("፨፨፨፨፨፨፨፨፨፨", 0, floor(10 * prop("Earned") / prop("Income Goal"))) + "჻ " + format(floor(100 * prop("Earned") / prop("Income Goal"))) + "%", "")Date Property Formula
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%")), "")18. Bubbles Progress Bar
While the 8-Bit Slider and dotted pattern progress bars are unusual, the Bubbles progress bar is a common design practice. This progress bar is similar to the Block Progress bar, but it uses a circle instead of a square.
Formula
Numerical Property Formula
if(not empty(prop("Earned")) and not empty(prop("Income Goal")), slice("⬤⬤⬤⬤⬤⬤⬤⬤⬤⬤", 0, floor(10 * prop("Earned") / prop("Income Goal"))) + slice("◯◯◯◯◯◯◯◯◯◯", 0, 10 - floor(10 * prop("Earned") / prop("Income Goal"))) + " " + format(floor(100 * prop("Earned") / prop("Income Goal"))) + "%", "")Numerical Property Formula
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%")), "")19. Lite Floating Slider Progress Bar
Likewise to the 8-Bit Slider progress bar, Lite Floating Slider is unique and is loved by geeky users. You can use this progress bar with funky templates that need a bit of unusual design elements to give an appealing look.
Similar to most of the other progress bar designs, you can use both numerical and date progress frameworks to develop this progress bar.
Formula
Numerical Property Formula
if(not empty(prop("Earned")) and not empty(prop("Income Goal")), slice("__________", 0, floor(10 * prop("Earned") / prop("Income Goal"))) + "▃" + slice("__________", 0, 10 - floor(10 * prop("Earned") / prop("Income Goal"))) + " " + format(floor(100 * prop("Earned") / prop("Income Goal"))) + "%", "")Date Property Formula
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%")), "")20. Levels Progress Bar
The last unique and interesting progress bar design on our list is the level progress bar design. Here, the dotted levels are increased in height as the progress is growing. You can use it on generic and aesthetic dashboards to give it an appealing appearance.
Formula
Numerical Property Formula
if(not empty(prop("Earned")) and not empty(prop("Income Goal")), slice("⠤⠴⠾⠿⠿⠿⠿⠿⠿⠿", 0, floor(10 * prop("Earned") / prop("Income Goal"))) + " " + format(floor(100 * prop("Earned") / prop("Income Goal"))) + "%", "")Date Property Formula
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%")), "")That’s all! These are 20 Notion progress bar designs that you can use to gamify and aesthetically enhance your templates.
Did you know that Notion recently added a native simple and minimal progress barinto the database blocks? Let’s look at how to use it.
Create Notion Progress Bar Using the Native Option
The native progress bar works with the number and formula field. In this article, I’ll show you an example using the number property.
Do you remember the income example goal example that we used for the above progress bars? Let’s use the same example for this one too.
A good thing about the native progress bar is that you don’t need to add a separate “Goal” column into the database. Once you’ve added the current progress column (Earned) and added the values, click on the header of the column.
This will open a popup where you need to click on the Edit Property option. A new popup will open where you must select either the Bar or Ring as the progress bar in the Show as an option.
If you look at the database table, you’ll see a cute and minimal bar showing the progress. You can customize its color, input the goal value and also choose to show or hide the progress number.
The native Notion progress bar is a perfect solution for those looking for a simple, clean and customizable option.
If you are looking for an in-depth look at these progress bars, I will recommended checking out the below pages:
Wrapping up: Notion Progress Bar Designs
There are several progress bar designs that you can use with your desired Notion templates for creating efficient journals and trackers to the best aesthetic ones. You get minimal as well as bold design options to .
Which is your favorite one? Let us know in the comment section.
