#features #blocks 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 schemes|color scheme]] colors. ## HTML example ```html <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|500]]