Best Unicode spinner and progress bar?

Update: The big animated GIFs are killing the alternate webserver I use to host them. If you don’t see the images below, wait a bit and try again …

Unicode provides lots of fun block characters. But can we use them to improve on the traditional ASCII spinner and progress bar?

This is what I settled for in my recent addition to guestfish:

Here’s a traditional ASCII progress bar for comparison:

The problem with Unicode is not with the completeness of the fonts, but with consistency and rendering. Characters that belong to the same logical group just vary in size or consistency, like the circular spinner used here:

The rendering of fonts doesn’t appear to be very well tuned for block characters. The light grey dither in the following bar should not be split into two like this:

Unicode characters themselves are not arranged logically (check out Xah Lee’s description of Unicode arrows). Thus it was very hard to find anything which points in all 8 directions, with many characters pointing only in say 3 or 4 out of 8 directions (eg. NE, E, SE and nothing else .. wtf?). In fact the only usable one was this arrow:

Here are some other attempts:

Want to try making your own? Here is the little C program that I used to make the animations above.

PS. If you are going to use UTF-8 in your program, make sure you’re running in a UTF-8 locale, and provide a simple ASCII fallback.

About these ads

4 Comments

Filed under Uncategorized

4 responses to “Best Unicode spinner and progress bar?

  1. Heh, great minds think alike. I wrote a spinner sampler prog in python years ago. Just comment/uncomment options at the top of http://www.pixelbeat.org/talks/python/spinner.py
    and there is also the progress bar script here

    http://pastebin.com/iA4x8DNP

    BTW I can’t view examples as annexia.org seems borked

  2. How about cycling for \u258f to \u2588,
    giving you a smoother progression.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s