> [!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 ````