Hello, fellow writers! If you're like me, you like using cute little 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".¹

You will need to enable JavaScript to use this generator. If Internet Explorer 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.

Meter Preview

In the box below 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.

Happy trails, and may you have better luck writing than me! If you have any comments, complaints or suggestions, please don't hesitate to get in touch.

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—not just "HTML only". That way you're guaranteed to get all the files that the meter needs. If you're not sure of how to do this, here are instructions for a few popular browsers.
2. 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.
3. Thank you very much to Jan Odvárko for creating jscolor, the color selector now being used for these options. Cheers!
4. 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.
5. 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.