tonsky / FiraCode

Free monospaced font with programming ligatures
SIL Open Font License 1.1
77.26k stars 3.1k forks source link

Ligatures for common progress bars #1183

Open tonsky opened 3 years ago

tonsky commented 3 years ago

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

⸨          ░░░░░░░░⸩ ⠼

gauge:

[#####.....]
tonsky commented 3 years ago

pip

|████████████████▌               |
tonsky commented 3 years ago

wget

[===============>                            ]
tonsky commented 3 years ago

Gradle

<======------->
tonsky commented 3 years ago

htop

[||||||||||||||||||                    14.2%]
tonsky commented 3 years ago

brew

################################################                          67.0%
tonsky commented 3 years ago

yarn

[##############################################----------------------------------] 46/80
avrong commented 3 years ago

cargo

    Building [===========================>                           ] 151/296
pcdevil commented 3 years ago

apt has the same as gauge:

Progress: [ 98%] [########################################################..]
magicvodi commented 3 years ago

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)

maximal commented 3 years ago

Composer (PHP package manager):

  0/96 [>---------------------------]   0%
 64/96 [==================>---------]  66%
 96/96 [============================] 100%
lbguilherme commented 3 years ago

Docker

0732ab25fa22: Downloading [=================================>                 ]  17.56MB/26.5MB
dbechrd commented 3 years ago

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

tonsky commented 3 years ago

Gradle download

..............10%..............20%...............30%..............40%..............50%..
ioquatix commented 2 years ago

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".

maximal commented 2 years ago

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

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

image

maximal commented 2 years ago

PHPStan static analysis tool:

100/246 [▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░░░░]  40%
GlowingUmbreon commented 2 years ago

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.

tonsky commented 2 years ago

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

cristaloleg commented 2 years ago

@tonsky adding to FireCode I suppose.

joelnordell commented 2 years ago

@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.

bertin0 commented 1 year ago

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.