mirror of
https://github.com/cactuzhead/Advanced-Progress-Bars.git
synced 2026-07-22 12:20:30 +00:00
89 lines
No EOL
4.1 KiB
Markdown
89 lines
No EOL
4.1 KiB
Markdown
---
|
|
title: Usage
|
|
layout: default
|
|
has_toc: false
|
|
back_to_top: true
|
|
back_to_top_text: "Back to top"
|
|
nav_order: 20
|
|
---
|
|
## 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`.
|
|
|
|
|
|
|
|
The `percentage` will be automatically calculated based on your `Value` and `Total`.
|
|
{: .note }
|
|
The text within the code block example on the settings page will automatically be updated to reflect the changes you make in the other settings.
|
|
|
|
## Hotkey Setup
|
|
To make it more convenient, you can add a hotkey that automatically inserts a progress bar code block into Obsidian. Simply follow these steps:
|
|
|
|
1. Open Obsidian and go to the **Settings** by clicking the gear icon in the bottom left corner.
|
|
2. From the **Settings** menu, go to the **Hotkeys** section on the left sidebar.
|
|
3. In the filter search bar found at the top of the Hotkeys section, start typing **"Advanced Progress Bars"** to find the `Advanced Progress Bars: Paste code block` action.
|
|
|
|
|
|
5. Click on the round plus button next to the found action, and assign the desired hotkey combination (e.g., `Ctrl + Shift + B` or any other combo that suits you).
|
|
|
|
|
|
## Copy to Clipboard
|
|
Instead of manually typing the code block, or setting up a hotkey, you can use the `Copy to Clipboard` button, found at the top of the `APB` settings page to quickly copy it for later pasting into Obsidian.
|
|
|
|
## Refreshing Notes After Changes
|
|
To see the changes you've made in the settings reflected in your notes, you may need to switch back and forth between notes or alternatively, reload Obsidian to refresh the active note.
|
|
|
|
However, if a new progress bar is added to a note, it *will* display correctly, even if the existing progress bars on the same page haven't been refreshed yet.
|
|
|
|
{: .note }
|
|
This will only be a problem directly after you make changes to the settings.
|
|
|
|
## Multiple Advanced Progress Bars
|
|
You can also stack progress bars by adding additional bars within the same code block, see example below.
|
|
````
|
|
```apb
|
|
My Title: 57/100
|
|
Smaller Total: 2/7
|
|
Very Large Total: 2034/2345
|
|
```
|
|
````
|
|
The above stacked bars example would be rendered like this (using default dark colors & settings)
|
|
|
|
|
|
|
|
{: .note }
|
|
The code block example on the settings page will only include one progress bar. You will need to manually add any additional progress bars once pasted into Obsidian.
|
|
|
|
|
|
## Date Progress Bars <span class="label label-green badge">NEW 1.2.0</span>
|
|
With release `v1.2.0` you now have the ability to automatically track the days between a start and end date.
|
|
|
|
|
|
|
|
You can manually add a date progress bar by creating a code block which matches the pattern `Title: Start_date||End_date{template}`
|
|
|
|
An example code block would be the following:-
|
|
|
|
````
|
|
```apb
|
|
My Title: 2025-08-28||2025-12-31{template}
|
|
```
|
|
````
|
|
|
|
Just like a normal progress bar, at the start, you have to use a title followed by a colon `:`.
|
|
|
|
{: .note }
|
|
Although you need to use a title followed by a colon for any valid progress bar, you can hide this title if you wish to by changing the title's color to pure black (`#000000`) from within the template system.
|
|
|
|
Both dates have to be in the format `YYYY-MM-DD` and seperated by a double pipe `||`
|
|
|
|
And just like a normal progress bar you can optionally add a valid template name within curly braces at the end of the line.
|
|
|
|
You can stack progress bars of any type (normal or date) within a single code block if you wish.
|
|
|
|
Additional styling options are found in your templates extended settings panel by clicking the gear button next to your template name. |