Using MetaEdit to automatically update progress bar to track your task


I was inspired by this post Progress bar for notes. I thought I could use same method to track my tasks that scatter around different page.

However, I found the information kind of all around the internet, so I gather (hopefully) all the information you need to set up progress bar to track your to-do list or task, even if they are in different page!

Also this is my first guide so feel free to comment if you have any suggestion.

Plugin Requirement:

DataView: Turn on “Enable JavaScript Query” and “Enable JavaScript Inline Query”

MetaEdit: Turn on “Progress Properties” and add properties “Total” and “Completed” like this:

Construct Metadata:

You need a metadata like this:

Screenshot 2024-03-23 202737

MetaEdit will update the “Total” and “Completed” value if you complete tasks or add new tasks.


If you have tasks from different pages:

Replace “#tag” with the tag which pages containing tasks you want to track.
Replace “folder” with the folder which pages containing tasks from.

`$= const Pages = dv.pages('"folder" and #tag');const value = Math.round(Pages.Completed.values.reduce((a,b)=>a+b,0) / Pages.Total.values.reduce((a,b)=>a+b,0) * 100);"<progress value='" + value + "' max='100'></progress> " + value + "%" `

dv.pages() can also do many other thing. You can also use dv.pages('#tag1 and #tag2')
to find all pages with tag1 and tag2 or dv.pages('#tag1') to find all pages with tag1.

See full references:

If you have tasks from a single page:

Replace YourPage to your page name.
Alternatively, if your task is at the same page, you can replace"YourPage") with dv.current() , so that you don’t need to change the code if you change page’s name.

`$= const Page = dv.current();const value = Math.round(Page.Completed / Page.Total * 100);"<progress value='" + value + "' max='100'></progress> " + value + "%" `

Change Progress Bar Color

You need a snippet.css file. To create one, head to Settings → Appearance → CSS snippets → open snippets folder(the folder icon) → Create a .css file there(name doesn’t matter) → back to Appearance tab → Enable the .css file you just created

Open your .css file (Notepad can open it). Paste the code below:

progress[value] {
appearance: none;
width: 100%;
height: 18px;

progress::-webkit-progress-bar {
  background-color: #453474 ;
  border-radius: 7px;

progress::-webkit-progress-value {
  background-color: rgb(0, 236, 118);
  border-radius: 7px;

You can edit the value as you like.
Also, The color value can be:

background-color: green/*Other color name works too*/
background-color: #74992e
background-color: rgb(0,0,0)
background-color: rgba(0,0,0,0)
background-color: hsl(0,0,0)
background-color: hsla(0,0,0,0)

See full reference:
background-color - CSS: Cascading Style Sheets | MDN (

That’s all! Hope you learn something! Thank you for reading!
And feel free ask in comment or share your progress bar style (cuz I suck at designing and I need some idea XD).