Progress bar for notes (Easy and powerful) with dataview

Hi!

Today, I’m going to show you how to track your progress, whether it’s books, notes, projects, goals, or anything else you want to track with a progress bar, with (or without) dataview.


Progress Bar

My example will be with my “currently-reading” book, but like I said it can be anythings you want.

1. Create your note.

2. Add to your metadata the progress code here :

<progress max=100 value=0> </progress> 0%

If you want it more dynamic you can use this code to center it, or put it to the left or right :

<p align = "center"> <progress max=100 value=0> </progress> 0% </p>

Command:

Note Example:

As you can see I named it Progress_Bar (DON’T use spaces in metadata because the dataview will not recognize it, instead use “_” )

Progress Bar + Dataview :

Now I want my reading list to be organized with the dataview so I can track my progress directly in my “Library” note, which brings us to step 3.

3. For the dataview, it’s really easy. Just add the “Progress_Bar” Metadat to the table:

TABLE without id 
  Progress_Bar AS "Progress Bar"

My example:

```dataview
TABLE without id 
  Progress_Bar AS "Progress Bar",
  ("![cover|80](" + Cover + ")") as Cover,
  file.link AS "Title",
  Author AS "Author",
  Category AS "Genre"
FROM #FM/📁02/📖 
where Status = "Currently-reading"
SORT Progress desc
```

Result

That’s it. Thanks for reading and I hope this post helped you in some way.

Feel free to comment if you have any questions, I’m a beginner in coding but I’ll do my best.

P.S: This is my first post, go easy on me :).

12 Likes

Thank you for sharing this! :smile:

Wow, thanks!

Hey, awesome! Currently I’m using this code to create a very similar progress bar:
("![progress + " + (round((Current/TotalPages)*100)) + " %](https://progress-bar.dev/" +(round((Current/TotalPages)*100)) + "/)") AS Progress

Would it somehow be possible to implement this with your version? So it would divide the Current page by the TotalPages to get the percentage?

That way you wouldn’t need to manually put in the percentage.

Thanks :slight_smile:

2 Likes