FiraCode icon indicating copy to clipboard operation
FiraCode copied to clipboard

Ligatures for common progress bars

Open tonsky opened this issue 5 years ago • 22 comments

tonsky avatar Jan 16 '21 15:01 tonsky

npm (the filled part is displayed with background color instead of character):

⸨          ░░░░░░░░⸩ ⠼

gauge:

[#####.....]

tonsky avatar Jan 16 '21 15:01 tonsky

pip

|████████████████▌               |

tonsky avatar Jan 16 '21 19:01 tonsky

wget

[===============>                            ]

tonsky avatar Jan 16 '21 19:01 tonsky

Gradle

<======------->

tonsky avatar Jan 16 '21 19:01 tonsky

htop

[||||||||||||||||||                    14.2%]

tonsky avatar Jan 16 '21 19:01 tonsky

brew

################################################                          67.0%

tonsky avatar Jan 16 '21 20:01 tonsky

yarn

[##############################################----------------------------------] 46/80

tonsky avatar Jan 16 '21 20:01 tonsky

cargo

    Building [===========================>                           ] 151/296

avrong avatar Jan 16 '21 20:01 avrong

apt has the same as gauge:

Progress: [ 98%] [########################################################..]

pcdevil avatar Jan 17 '21 13:01 pcdevil

pacman (default config) same as gauge: [##################################------------------------------------------] 45%

pacman with ILoveCandy setting: [-------------------------------------------------c o o o o o o o o ] 68% (The c is yellow and changes between lower and upper case)

magicvodi avatar Jan 18 '21 15:01 magicvodi

Composer (PHP package manager):

  0/96 [>---------------------------]   0%
 64/96 [==================>---------]  66%
 96/96 [============================] 100%

maximal avatar Jan 19 '21 15:01 maximal

Docker

0732ab25fa22: Downloading [=================================>                 ]  17.56MB/26.5MB

lbguilherme avatar Jan 19 '21 22:01 lbguilherme

There’s a cool animated one in a lot of Linux distros (I think during boot, I don’t recall):

....| ..../ ....- ....\ (Back to start)

The last character spins until the next progress increment, when it is replaced with a ‘.’ and the spinner moves right.

You can see this type of spinner in action, without the progress indicating periods, here (along with some other pretty neat ideas): https://youtu.be/5t2DO6Lp6Nk

dbechrd avatar Jan 20 '21 15:01 dbechrd

Gradle download

..............10%..............20%...............30%..............40%..............50%..

tonsky avatar Jan 29 '21 18:01 tonsky

I see you added some progress bar characters.

Using the unicode block characters with a solid background you can make a fine-grained progress bar:

			BLOCK = [
				" ",
				"▏",
				"▎",
				"▍",
				"▌",
				"▋",
				"▊",
				"▉",
				"█",
			]

You get n/8 sub-resolution with those blocks.

It would be nice if you could do something similar with the progress bar characters you made, but it might require a rethink on how they fit together, with the left and right brackets having no actual "progress bar filler".

ioquatix avatar Nov 30 '21 20:11 ioquatix

Laravel Mix uses filled-only blocks but highlights them by different colors:

● Mix █████████████████████████ building (19%)

image

maximal avatar Dec 01 '21 12:12 maximal

PHPStan static analysis tool:

100/246 [▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░]  40%

maximal avatar Dec 01 '21 19:12 maximal

Correct me if I'm wrong but isn't adding a loading font for every common loading screen a bit extreme? There are so many common loading bars and they can vary a lot. And a lot of them the size changes depending on the size of your terminal which I assume would make it harder.

GlowingUmbreon avatar Feb 08 '22 08:02 GlowingUmbreon

@GlowingUmbreon I am not sure I understand. What do you mean by “adding a (loading) font”? Adding where?

tonsky avatar Feb 08 '22 13:02 tonsky

@tonsky adding to FireCode I suppose.

cristaloleg avatar Feb 08 '22 14:02 cristaloleg

@tonsky - I have an idea: you could add a ligature for the new FiraCode progress bar chars themselves, for the case where a bar is 100% completed. Some progress bar libraries allow setting a "theme" for the bar, with characters for bar start, filled progress, empty progress, and bar end, but do not have a concept of two different characters for bar end depending on whether the progress has reached 100% or not.

This results in a progress bar that looks slightly incomplete:

image

A ligature could solve that by replacing the sequence \uee04\uee02 (filled bar, empty end) with \uee04\uee05 (filled bar, filled end).

Even without all the application-specific ligatures, I think this would be useful.

joelnordell avatar Mar 17 '22 16:03 joelnordell

pacman with ILoveCandy setting: [-------------------------------------------------c o o o o o o o o ] 68% (The c is yellow and changes between lower and upper case)

Personally I would leave this one be. If you specifically set ILoveCandy for your pacman you probably want it to stay that way, and if you want to get the fancy bar you can just disable ILoveCandy.

bertin0 avatar Jun 07 '23 12:06 bertin0