- Overview
- Scorecard
- Updates3
Time Progress bars for Obsidian
Features
- 🕒 Flexible time formats - Supports both simple time (HH:MM) and full datetime (YYYY-MM-DD HH:MM)
- 🌙 Overnight support - Correctly handles ranges crossing midnight
- 🎨 Customizable display - Show/hide percentage, dates, and add custom names
Installation
- Available via the Obsidian Community Plugins tab: search for "Chronobars"
- Or install manually:
- Download the latest release
- Extract to your vault's plugins folder:
.obsidian/plugins/chrono-bars
Usage
Create a code block with the chrono-bar settings:
```chrono-bar
start: 09:00
end: 17:00
name: Workday
percentage: true
dates: true
```
Supported Parameters
| Parameter | Description | Default | Examples |
|---|---|---|---|
start |
Start time (required) | - | 09:00, 2023-12-31 23:30 |
end |
End time (required) | - | 17:00, 2024-01-01 02:00 |
name |
Custom title for the bar | None | name: Workday |
percentage |
Show/hide percentage | true |
percentage: false |
dates |
Show/hide date/time labels | false |
dates: true |
remainingTimeFormat |
Show remaining time, letters pick units: y M d h m s (M is months) | off | d h m s, y M d h m s |
remaining |
Shorthand for remaining time with default d h m s |
false |
remaining: true |
remainingPosition |
below shows under percent, replace hides percent |
below |
remainingPosition: replace |
remainingLabel |
Optional prefix before remaining time | None | remainingLabel: Left |
Time Format Examples
- Simple time:
14:30 - Full datetime:
2023-12-31 23:30 - Overnight range:
23:30to03:00(automatically handles midnight crossing)
Remaining time format
Set remainingTimeFormat to pick which units to show. Use y years, M months, d days, h hours, m minutes, s seconds. Only listed units are shown, leading zeros are hidden, and the smallest unit is always kept. When s is included the line updates every second, otherwise every 30 seconds. Past events show Ended.
```chrono-bar
start: 2025-01-01 00:00
end: 2026-01-01 00:00
name: New Year Countdown
remainingTimeFormat: d h m s
```
Use remainingPosition: replace to hide the percentage and show only remaining time.
Examples
```chrono-bar
start: 2025-01-01 00:00
end: 2026-01-01 00:00
name: New Year Countdown
dates: true
```
Becomes:
Styling
You can customize the appearance by adding these CSS snippets to your vault:
.chrono-bar-container {
/\* Container styles */
}
.chrono-bar {
/\* Background bar styles */
height: 20px;
}
.chrono-bar-fill {
/\* Progress fill styles */
background-color: var(--interactive-accent);
}
.chrono-bar-text {
/\* Text styles */
}
Development
Want to contribute? Here's how to set up the development environment:
Clone this repository
npm installnpm run devto start compilation in watch mode
Support Found a bug or have a feature request? Please open an issue.