Simple ProgressBar

Simple Progress Bar (SPB) is a progress bar plugin for Obsidian.

How does it work?

It works by adding Markdown code blocks, and adding your options there.

Installation

You can refer to this Official Plugins FAQ to learn how to install plugins.

Setup

1. Install the plugin.
2. Enable it.
3. Done!

Usage

To create a new progress bar, simply do:

```progbar
name: Progress Bar
max: 100
value: 0
id: new-progressbar
```

And that's it! You now have a completely working progress bar:)

And yes, there is more customization for it, if you want to see them, go to the Properties Page.

Properties

This is the whole list of properties that can be used in the progress bar item.

name: string
max: int
value: int
id: string
width: string
step: int
btnUp: string
btnDown: string
customFormat: string
showName: bool
showButtons: bool
showId: bool
showBar: bool
showLabel: bool

This is the detailed properties:

name: The name displayed before the progress bar. This label won't be displayed if the showName property is false. Defaults to 'Unnamed'.

max: The limit of the progress bar, you can't go over that number. Defaults to 100.

value: The current value of the progress bar. Defaults to 0.

id: A unique ID for the progress bar. Defaults to null.

width: The bar width, you can use any CSS Units. Defaults to '160px'.

step: Controls how much the progress bar’s value increases or decreases with a single button click. Defaults to 1.

btnUp: Changes the display text or symbol inside the increment button. Defaults to '+'.

btnDown: Changes the display text or symbol inside the decrement button. Defaults to '-'.

customFormat: The custom value label formatting, for more info on how to format the label using this property, refer to the Custom Formatting section. Defaults to '[{value}/{max}]'.

showName: Determines if the name label should be shown. Defaults to true.

showButtons: Determines if the control buttons (+/-) should be shown. Defaults to true.

showId: Determines if the ID label should be shown. Defaults to false.

showBar: Determines if the progress bar should be shown. Defaults to true.

showLabel: Determines if the value label ("[value/max]") should be shown. Defaults to true.

Custom Formatting.

You can use custom formatting on the value label with some of the bar's properties. To use it, just set the customFormat property to the formatting of your liking, you can use the other bar's properties by wrapping them inside curly braces ( {} ), for example, lets say you want the formatting to be the following:

Unnamed | [0/100] | Width: 160px

You can easily do that by replacing every property with the formatting style:

{name} | [{value}/{max}] | Width: {width}

Yay! You now have a custom format for the label.

Every normal property (except for the booleans) are supported in the custom formatting, as long as you wrap them inside curly braces.

Also, there are some unique custom formatting-only "properties":

• {percent}/{percentage}/{%}: The completion percentage of the progress bar, calculated using the following formula:

$$\lfloor \left( \frac{\text{currentVal}}{\text{max}} \right) \times 100 \rceil$$

((currentVal / max) * 100 using Round Half Up rounding to the nearest whole integer).

For developers:

You are completely free to use, edit, and anything else with the code in this plugin. If you repost it anywhere else, give me the credits, and don't remove the comment on line 1 of main.js.

The code is also pretty easy to read and edit, but if you need help i might be able to help you, if so, contact me on

This is experimental, and my first obsidian plugin, so feel free to give me any feedback/suggestion! :)