Nyan Bars

Progress bars made out of ASCII characters! Easy to learn the syntax and create your own custom progress bar. Written as a jQuery plugin.

nyanbars.itsagoldenage.com

The code parses the text input manually, character by character (link). Normally you're not supposed to write a parser by hand. —Seriously, kids, don't try this at home. But, if the grammar is simple enough, then you might be able to manage it. I recommend the approach I used here: keep track of the parser's state using an enum, move character by character, and use an if–else to handle all state–input combinations and to organize the state transitions.

Update 2014.4.12

I've been thinking for a while about doing another wave of work on this project. I think it should be possible to easily do things like modulate the color and weight of each piece of text, so that you could make an actual rainbow-colored Nyan Cat. Here's a syntax idea:

{{r#f00|g#0f0|b#00f}}

Meaning 'an animated character showing first a red "r", next a green "g", and finally a blue "b".' The hash symbol is natural for representing colors, and you could escape it if you wanted an actual hash sign.

But you could also generalize that into hash tags to specify common CSS styles or explicit key–value pairs:

{{r#bold|g#italics|b#font-weight:small-caps}}

Then I should rework the site to have saving and sharing features, so that people could work on awesome, multi-colored text animations and show them off (I put a similar, very simple thing on http://jsondiff.itsagoldenage.com).

The only big problem with this is that the Nyan Bars syntax is already hard to read and orchestrate when there's lots of stuff going on, and right now it's just writing down the characters you see. Add CSS and markup syntax to everything and it becomes impossible to gist what a syntax pattern does by inspection alone.

I would definitely need a more advanced designer than just a textarea. Something that would allow you to expand and collapse the multi-character segments, so that you can inspect them in a WYSIWYG fashion, then click in to modify them. Might be an interesting AngularJS project, since it has a more detailed control aspect than other things I've done. Suggestions welcome, here or @PaulBaumstarck.