---
title: Advanced Progress Bars
layout: home
has_toc: false
back_to_top: true
back_to_top_text: "Back to top"
nav_order: 1
---
# Advanced-Progress-Bars
![Advanced Progress Bars](/assets/Obsidian Advanced Progress Bars - Hero Banner.png)
This plugin extends obsidian to allow you to create custom progress bars by using a simple markdown code block.

<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px;">
  <div style="flex: 0 0 auto; padding-right: 20px; display: flex; align-items: center;">
    <img src="assets/ko-fi.png" alt="ko-fi" style="width: 100px; height: auto;">
  </div>
  <div style="flex: 1; display: flex; align-items: center;">
    <p style="margin: 0px">
      If you find value in this plugin and would like to support us, please consider using our <a href="https://ko-fi.com/cactuzhead" target="_blank">ko-fi</a>
    </p>
  </div>
</div>



## Installation
### 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<br>**https://cactuzhead.github.io/Advanced-Progress-Bars/**<br>and download the files (`main.js`,  `manifest.json` and `styles.css`).
- Navigate to your vault's plugin folder<br>**[your vault]/.obsidian/plugins**<br>and create a new folder called<br>`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.