My Writing Progress Bar

Posted by Jen on Wednesday, February 25th, 2009 @ 9:55 pm

I’ve had quite a few people ask me about my status bar. And since I don’t use a generator for it (instead I update the code manually), I thought I’d share what I do in case anyone else is curious and would like to use it.

Here’s the code:

<table cellspacing=0 cellpadding=0 width=’102px’ border=0><tr height=’12px’><td valign=center align=center bgcolor=#CE8787><table cellspacing=0 cellpadding=0 width=100><tr height=’10px’><td width=’10.00%‘ bgcolor=#CE8787></td><td width=’90.00%‘ bgcolor=#F5C5C5></td></tr></table></td></tr></table><b><font size=-1 color=’#000000′>TITLE GOES HERE</font></b><br /><font size=-2 color=’#000000′> 7,000 / 70,000 Words (10%)</font>

I have highlighted everything in blue that needs to be updated according to what you’re working on.

The first part highlighted (10.00%) is the amount of the project completed, the second (90.00%) is the amount left to do. This just tells the status bar what to look like in terms of progress. It’s really the only part that needs to be updated to get the meter to show the right progress. Of course, you’ll probably also want to update the text, too, so it matches.

The next two things: “TITLE GOES HERE” and “7,000 / 70,000 Words (10%)” is the text that will be shown. You can change this to whatever you want. Book title, project name, how many chapters you are doing, how many words, etc.

Another option you have is changing the color of the status bar. I’ve highlighted below where you’d do that.

<table cellspacing=0 cellpadding=0 width=’102px’ border=0><tr height=’12px’><td valign=center align=center bgcolor=#CE8787><table cellspacing=0 cellpadding=0 width=100><tr height=’10px’><td width=’10.00%‘ bgcolor=#CE8787></td><td width=’90.00%‘ bgcolor=#F5C5C5></td></tr></table></td></tr></table><b><font size=-1 color=’#000000′>TITLE GOES HERE</font></b><br /><font size=-2 color=’#000000′> 7,000 / 70,000 Words (10%)</font>

Here is a chart of HTML color codes you can use for this. You can pick your colors and use any combo that you’d like. I would advise picking a lighter color for the “not done” part and a darker color for the “done” part. It just makes more sense visually that way.

So, let’s say I really like blue. I decide to pick the dark blue color: #000066 and the light blue color: #0099FF. I also want to show I’m doing a revision and want to show progress in terms of chapters. I’ve already completed 2 out of 20 chapters. Here’s what I would update.

<table cellspacing=0 cellpadding=0 width=’102px’ border=0><tr height=’12px’><td valign=center align=center bgcolor=#000066><table cellspacing=0 cellpadding=0 width=100><tr height=’10px’><td width=’10.00%‘ bgcolor=#000066></td><td width=’90.00%‘ bgcolor=#0099FF></td></tr></table></td></tr></table><b><font size=-1 color=’#000000′>Manuscript Revision</font></b><br /><font size=-2 color=’#000000′> 2 / 20 Chapters (10%)</font>

In order to implement this, you just paste this HTML code in your sidebar or blog post. It will show up as this:

Manuscript Revision
2 / 20 Chapters (10%)

I hope this makes sense! If anyone has any questions, just post in the comments and I’ll try to answer as best I can!

Comments

By Sara Raasch on February 25th, 2009 at 11:12 pm

So — I would post that code directly into the blog edit box? Not in the HTML box?

By Sara Raasch on February 25th, 2009 at 11:12 pm

Oh — and thanks for this, btw!

By Jen on February 25th, 2009 at 11:25 pm

Sara - Well, I don’t use Blogger so I’m not sure what your options are. I’m guessing if you have an HTML box, I’d put it in there. Unless you’re using it when writing a post, and then you should be able to just drop that code where you write the post.

Did that help at all?

By Tara Maya on February 26th, 2009 at 2:02 am

I like it, but…whoa, hold on. Do I have do my own calculations of what percent 43,000 is of 98,000 words?
Cause I so suck at the math thing.

By JKB on February 26th, 2009 at 2:57 am

This is cool, Jen! I’m going to use this as soon as I know how many words FS is going to be! :)

By B.E. Sanderson on February 26th, 2009 at 8:57 am

Excellent explanation. Ever thought of going into training? I love this bit of code. Simple and very easy to customize. When I do have a status bar, I keep mine in its own sidebar. And if you have multiple projects, you can stack the codes and have several bars going at once.

By Sara Raasch on February 26th, 2009 at 9:26 am

Jen — that does help! I’ll give it a whirl…

By Jen on February 26th, 2009 at 9:48 am

Tara - Yep, unfortunately. But I just use the built in calculator on my computer.

You can also just go to Google search and type in “43,000/98,000=” and Google will tell you what the percentage is.

B.E. - I’ve done a little training before. I never feel like I explain things well!

By Amity on February 26th, 2009 at 10:20 am

This is wonderful! I am considering getting a website/blog soon, and I’ve been wondering how to do the progress bars. I actually did NaNoWriMo just so I could watch the progress bar on my WIP. Thanks a bunch for the info :)

By Andrew on February 28th, 2009 at 4:55 pm

Ah so that was how you did it - was wondering but didn’t really have a look to see.

By Ann Aguirre on March 13th, 2009 at 12:59 am

Thanks for this!

I was using Zokotu but the site went down again, which zaps out my meter. I think I prefer this because there are no images hosted anywhere, and I don’t have to constantly replace all the code, just need to update my numbers.

Trackbacks

 

Leave a Comment

« « Writing Update| Review: Black and White » »