I originally wanted to display the CPU usage of my MacBook in the menubar using xbar. In general, making text-based progress bars in terminals or using fixed-width fonts is easy. Just use the number of characters to create a linear ratio. Here are examples of fixed-width character progress bars:

[ =··················· ]  5%
[ ■■□□□□□□□□□□□□□□□□□□ ] 10%
[ XXXX________________ ] 20%
[ ▰▰▰▰▰▰▱▱▱▱▱▱▱▱▱▱▱▱▱▱ ] 30%
[ ▮▮▮▮▮▮▮▮▯▯▯▯▯▯▯▯▯▯▯▯ ] 40%
[ ██████████▒▒▒▒▒▒▒▒▒▒ ] 50%

Unfortunately, when using variable-width fonts like Arial or Helvetica, the spacing + styling becomes wildly inconsistent with these characters. Here are some examples:

• ⬤○○○○○○○○○ 10%
• ⚫⚫⚫⚪⚪⚪⚪⚪⚪⚪30%
• █████▒▒▒▒▒ 50%
• ◼◼◼◼◼◼▭▭▭▭ 60%

I set out the following requirements for my progress bar:

• Same length and size for different percentages
• Small and compact to fit into the menubar
• Symmetrical on both the X and Y axes
• Simple and high-contrast design

Despite many hours of searching, I found the potential candidates to be somewhat lacking when used in the macOS menubar (e.g. blurry, low-contrast, too big):

While browsing the Unicode Halfwidth and Fullwidth Forms I stumbled upon the perfect characters! Originally designed for CJK (Chinese, Japanese and Korean) computing, they are the Halfwidth Katakana Middle Dot ･ and the Halfwidth Black Square ￭.

They work well in both fixed-width and variable-width scenarios:

• ［ ･･････････ ］0%
• ［ ￭･････････ ］10%
• ［ ￭￭････････ ］20%
• ［ ￭￭￭￭￭･････ ］50%

... and can be combined with various end caps and styles:

• ⌈･････⌉
• ⌊･････⌋
• ❬ ･････ ❭
• ❨ ･････ ❩
• ｢ ･････ ｣
• ❰ ･････ ❱

Finally, here is a GIF of the progress bar in action!