Hello, fellow writers! If you're like me, you like using cute little word meters to keep track of your wordcount during NaNoWriMo. Or to keep track of other things at any point. :]

Well, here's a progress bar that doesn't use images—just straight HTML code. It's unobtrusive, loads faster than every image progress bar out there, can shrink and grow depending upon how much space it's allowed, and you won't ever have to worry about someone taking it down because of "too much bandwidth/CPU usage".1

You will need to enable JavaScript to use this generator. If IE warns you that "dangerous" scripts have been blocked, unblock them. This page gathers NO special information from your computer. I don't even use cookies!

Note that the code this generator gives you will only work in places that accept plain HTML, much like Zokutou's word meter.

Meter Preview
Important Stuff
Progress
* out of *
% *
Appearance
Meter Dimensions
px *
: % *
Font




3 *
Color4
*
*
*
Miscellany

This is the code you copy and paste for the meter to show up. It doesn't update with every change you make to the progress bar display, because that would get annoying. So when you're finished making changes and you want to get your code, click the "Refresh Code" link below this paragraph.

Refresh Code

Happy trails, and may you have better luck writing your actual novel than me!

  1. I may have to take the generator down if I get overrun. This is extremely unlikely, and your meters won't disappear. If you are truly concerned, feel free to save this page to your hard drive. It works even if you aren't connected to the internet!

    Should you decide to save this page, be sure to save the complete webpage. (File -> Save As -> Complete Web Page, in the drop-down list) This way you're guaranteed to get all the files that the meter needs.
  2. The maximum height is 15 pixels. Unfortunately, small heights will not always render correctly in IE 6. (They may show up slightly larger than intended.) This is a known bug in IE 6 that I have no way to fix. If you know how to get around it—without breaking meter overflow—let me know.
  3. Type the exact name of the font. Spelling counts! If you've got it right, the 'custom' label and the meter text will change to match your font.
  4. Color names ( red, yellow, transparent, etc. ) and hexidecimal codes ( #f00, #D7BAE3, etc. ) will work in any of these boxes.

    If this is all gobbledygook to you, here is a LONG list of color names to choose from. If you do not like any of those colors, go to ColorPicker.com and choose a color there.
  5. When you have completed your goal, the meter will appear full. (Congratulations.) For those who surpass their goals, there is "meter overflow"—if enabled, the progress section will extend past the end of the meter to infinity and beyond.

    As the meter will be wider than originally intended, enabling this feature may make certain website layouts look weird. Either shrink the width of the meter or disable meter overflow to alleviate/prevent this.

    This feature does not work in IE 6. (The meter stays at 100%.) This is a known IE 6 bug that I have no way to fix. If you know how to get around it, let me know.
  6. The separator is the text that appears between your progress number and your goal number. You can put anything here—for example, ★, or |. Not useful at all; it's just aesthetically pleasing. :]

    This setting is ignored if you use percentages.