Making Progress

One of my favorite screenwriting bloggers, Dave Anaxagoras, recently updated his blog. Changed the design, the categories, revamped the entire thing. It really looks fantastic now and is much easier to get around. Unfortunately, he seems to have dumped some pretty good articles during the transition. One of those lost posts explained how to create a progress bar that you can easily use on your own site to track your writing. And if you're not a writer, you can use it to track the progress of just about anything else. If you look over to the right, you'll see mine. They let others know not only what I'm working on, but the varying degrees of productivity -- or procrastination. C'mon, you all know how that goes.

The progress bar is über-easy to set up. And if you know even a little CSS and HTML, it's that much easier. Here's the code, followed by the inevitable explanation...

CSS:

.prog-border {
height: 17px;
width: 205px;
background: #113355;
border: 1px solid silver;
margin: 0;
padding: 0;
}

.prog-bar {
height: 13px;
margin: 2px;
padding: 0px;
background: #C9DDEC;
color: #113355;
font-size: 12px;
text-align: center;
line-height: 13px
}


HTML:

<div class="prog-border">
<div style="width: 75%;" class="prog-bar"><em>75%</em></div>
</div>


First, add the CSS code to your current CSS style definition, which should be found either in the header of the page's code or in a separate file. You can also change the colors to match your site if you feel the need.

Then, paste the HTML wherever you want the bars to appear. When you're ready to update your progress, simply change the percentages in the bar's HTML code. (The version I have here has a slight issue with the bar width once you get to 100%...and you WILL get to 100%, right? When the bar width is set to 100%, it extends past the frame. So, I use a 98% width to show a nice and neat 100% bar.) 

And there you have it. Now you can proudly display the fruits of your never ending labor to the world. Oh, and when you're done, be sure to visit Earl Newton's excellent collection of short films, Stranger Things...He's the one who asked me about the progress bars.