# Advanced-Progress-Bars
<img src="docs/assets/Obsidian Advanced Progress Bars - Hero Banner.png" alt="Advanced Progress Bars" style="width: 500px; height: auto;">
This plugin extends obsidian to allow you to create custom progress bars by using a simple markdown code block.
<br><br>
<div>
  <img src="docs/assets/ko-fi.png" alt="Ko-Fi" width="100" height="auto" style="vertical-align: middle;">
  <span>&nbsp;&nbsp;&nbsp;If you find value in this plugin and would like to support us, please consider using our <a href="https://ko-fi.com/cactuzhead">ko-fi</a></span>
</div>

### Installing via Obsidian
- Navigate to Settings -> Community Plugins -> Browse and then search for `Advanced Progress Bars`.
- Now select the Advanced Progress Bars plugin and click the install button.
- Remember to activate the plugin by going to `Settings` -> `Community Plugins` -> `Installed Plugins` and toggling the `APB` plugin on.

### Manual Install
- Find the latest release from [https://cactuzhead.github.io/Advanced-Progress-Bars/](https://github.com/cactuzhead/Advanced-Progress-Bars) and download the files (`main.js`,  `manifest.json` and `styles.css`).
- Navigate to your vault's plugin folder `[your vault]/.obsidian/plugins`, and create a new folder called `obsidian-advanced-progress-bars`.
- Copy the downloaded files into this new folder.
- Reload Obsidian.
- Remember to activate the plugin by going to `Settings` -> `Community Plugins` -> `Installed Plugins` and toggling the `APB` plugin on.

### Usage Example Code Block
To insert an `Advanced Progress Bar` into `Obsidian`, you use a fenced code block similar to the one below.
````
```apb
My Title: 57/100
```
````
In the `apb` code block, you define the attributes as `Title`: `Value` / `Total`.

## Documentation
For full documentation, please visit our <a href="https://cactuzhead.github.io/Advanced-Progress-Bars/" target="_blank">github page</a>