> [!kanban]+ [[Obsidian TTRPG Tutorials]] / [[Plugin Tutorials]] / [[Dataview]] / [[DataviewJS - Progress Bar on Tasks]]
> - [[Getting Started]]
> - ![[Pasted image 20230527003751.jpg|hsmall+wsmall+center]]
> - [[Plugin Tutorials]]
> - ![[Pasted image 20230527184201.jpg|hsmall+wsmall+center]]
> - [[Community Supported Games]]
> - ![[Pasted image 20230527001506.jpg|hsmall+wsmall+center]]
> - [[Obsidian TTRPG Tutorials/Templates/Templates\|Templates]]
> - ![[Pasted image 20230530220438.jpg|hsmall+wsmall+center]]
> - [[Community and Support]]
> - ![[Pasted image 20230527005303.jpg|hsmall+wsmall+center]]
You can add a status bar to your notes that tracks progress of checkboxes within your current note.
![[Obsidian_AaMCSaPjqL.gif]]
Copy the code below into a note.
Update the 2x `"Test"`. Change these to `"YourNoteName"`
````
```dataviewjs
(await dv.tryQuery('TASK FROM "Test" ')).values.length
const Tasks = dv.page("Test").file.tasks
let CompletedTasks = Tasks
.where(t => t.completed)
dv.span(
"![progress](https://progress-bar.dev/"
+ parseInt((CompletedTasks.length / Tasks.length) * 100)
+ "/)"
)
```
- [ ] Quest 1
- [ ] Quest 2
- [ ] Quest 3
- [ ] Quest 4
- [ ] Quest 5
````
Here is a variant:
![[Obsidian_qRU5Pc9IwV.gif]]
````
`$= const value = Math.round(((dv.current().file.tasks.where(t => t.completed).length) / (dv.current().file.tasks).length || 0) * 100); "<progress value='" + value + "' max='100'></progress>" + " " + value + "%"`
- [ ] Quest 1
- [ ] Quest 2
- [ ] Quest 3
- [ ] Quest 4
- [ ] Quest 5
````