Progress bars use 0 to 100 numbers to display a completion status. They can be created manually with HTML or automatically generated with Dataview.

Depending on the level of completion, the color of the progress bar changes, using your color scheme colors.

HTML example

<progress value="50" max="100"></progress>

Dataview example

Example Dataview query showing progress bar and percentage number below:

= "<progress 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"

The screenshot below shows the output using the default color scheme.

minimal-progress-bars.png#interface

Progress bars
Interactive graph