Drawing/Painting counter

[valiha]

I'm taking a break from a (really depressing) translation to rest a bit, and I thought I should try something. I've been seeing various word counters around, for BigBangs etc., but I've never seen one for drawings or paintings. So I spent a couple of minutes online, looking for a simple counter I could re-work into something suitable, and came across a progressbar at honorless.net. I spent some time playing with the css and came up with this:

From the original:

1 / 30 (3.33%)

to my version:

~ Drawings ~

1 / 30 (3.33%)

The code I used was the following:
<div style="color: #222222; background: #FAFAD2; margin: auto; padding: 5px 10px; border: double 3px #BDB76B; text-align: center; width: 15%; " title="3.33%"><p style="margin: 0px; padding: 0 0 5px 0; font-size: 11pt; font-family: monospace; ">~ Drawings ~</p><div style="text-align: left; margin: 2px auto; font-size: 0px; line-height: 0px; border: solid 1px #AAAAAA; background: #F5F5DC; overflow: hidden; "><div style="font-size: 0px; line-height: 0px; height: 10px; min-width: 0%; max-width: 3.33%; width: 3.33%; background: #5a8900; "><!----></div></div><div style="background: url('http://i.imgur.com/EIWeW.png') no-repeat center left; padding: 0 0 2px 0; font-size: 8pt; font-family: monospace; ">1 / 30 (3.33%)</div></div>

I'm sure someone has already come up with the idea, but I had no patience to try and find it so I customized one myself, using what little css knowledge I had. My laptop doesn't seem to show colors faithfully so I have no idea whether the ones I chose look ugly on your screen, so if you plan to use the code, feel free to customize all to your preference.

Credits:
- Original progressbar: generator at honorles.net
- Palette icon: Fugue Icons