Progress bar of tasks in folder, and embed progress bars

I have a structure in my vault that I have a project folder, with a ‘Main’ note and subproject notes. Each subproject note has tasks and in each of these notes I have a progress bar showing the proportion of completed task for that subproject:

= "<div style='width: 100%; text-align: center;'>" +
"<progress style='width: 100%; height: 20px;' value='" + 
(length(filter(this.file.tasks.completed, (t) => t = true)) / length(this.file.tasks)) * 100 + 
"' max='100'></progress>" + 
"<br>" + 
round((length(filter(this.file.tasks.completed, (t) => t = true)) / length(this.file.tasks)) * 100) + 
"% completed</div>"

I now want a progress bar in my ‘Main’ note that shows overall progress on the entire project, by calculating number of completed and total tasks in the folder where the note is located (the project folder). How would I adjust the code above for this project bar?

And then I want to have a dataview table on my homescreen/dashboard in which I can embed the progress bars of each ‘Main’ note (or basically all notes with the tag #mainprojectnote).

How is this different from your other thread in a very similar subject?

This would be a progress bar based on a folder. This would be inline code that only results in a progress bar (full width of the note) and not a dataview table as suggested in your answer on my other question (which solved another problem, thank you!).

Then in my homescreen I want to take these progress bars from all ‘project main notes’ (with a specific tag) in a data table to show overall project progress.

Hope this clarifies it!