Progress bars

I'm having a very quiet Sunday, which is a good thing, as I can have a little
rest before I go back to work (my holiday time is over). We had a little bit
of snow this morning, but it melted as soon as it touched the ground, however
my daughter was very happy to see the flakes swirling in front of her, fun time.

The weather is still cold, colder than what we're used to here in the French
Midi, it reminded me that I should finish the few warm-wintery-things I started
so that they could be useful, instead of gathering dust in my drawers.

I have a few works in progress down there, WIPs as my fellow crochetville pals
say.

I thought it would be nice if I had a WIP bar too, but then, which one to chose,
that is the question... There are many, each one is different, each one is interesting
in its own way.

1 - The Flash Program

Olympic project:




Cabled cardigan:

Here is what Anna, from the now defunct site Annaknits, explained (thanks to
Andrea
for finding the original page) :

“You might find something completely different to use it for, but I use it
to display the percentage of a project done. There are only 2 variables to
set, and you can integrate it easily into more complex code, like I have here,
or update it manually very simply. You can set the color and percentage to
anything you want. To put it on your site:

~ First download the Flash file. (Right-click and “Save Target As…”) Copy
it to your own server. Make a note of where you put it!

~ Wherever you want to put the percent bar, paste this code:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
width="102" height="17">

<param name="movie" value="(path)/percentbar.swf?percentage=100&colorout=25BFE0">

<param name="quality" value="high">

<embed src="(path)/percentbar.swf?percentage=100&colorout=25BFE0"
quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="102" height="17"></embed>

</object>

~ Edit the colored parts of the code, changing the “100” to whatever percentage
you would like to display. Change the "25BFE0" to the hex code of whatever
color you would like to use for the progress bar. Finally, if you didn’t put
the Flash File in your root directory, replace "(path)" with the path to the
swf file. If it is in your root directory, omit "(path)" altogether.

~ You’re done!”

I uploaded my flash program into the free image hosting site www.photobucket.com,
as if it were a picture, it makes it easy to find out the path of the flash
object, the swf file. As for the code, you can cut it down to this :

<object>

<embed src="(path)/percentbar.swf?percentage=(percentage)&colorout=(hexadecimal
code of the chosen color)" quality="high" type="application/x-shockwave-flash"
width="(the width you want the object to be, eg
150 if it's 150px)" height="(the width
you want the object to be)"></embed>

</object>

I like the smooth look of it, but everybody doesn't have a flash-friendly computer, I'm afraid that would render my blog less readable.

2 - Table cells

Olympic project :
100%
Cabled cardigan :
	12%

Here's the code:

<table width="150" border="0" cellspacing="0"
cellpadding="0">

<tr>

<td colspan="2" ><strong><em>Olympic project
:</em></strong></td>

</tr>

<tr>

<td colspan="2" width="100%" height="30px"
bgcolor="#FFCCCC"><div align="center"><strong>100%</strong></div></td>

</tr>

<tr>

<td colspan="2"><strong><em>Cabled cardigan
:</em></strong></td>

</tr>

<tr>

<td bgcolor="#FFCCCC" width="12%" height="30px">&nbsp;</td><td
bgcolor="#FFFFFF" width="88%"><div align="center"><strong>12%</strong></div></td>

</tr>

</table>

The bar is made of two cells, one "full", with a background color
of your choise and a width consistent with the percentage of progress of your
crochet project, the other "empty" (background color white or no background color), with a width consistent with what is left to be crocheted. if it's 100% then it'll be one cell with a colspan of 2 (one cell replacing 2). This is an easier way to achieve the same result as the previous one, especially if you're
not comfortable with the flash technology. Tables are easy to implement and
look fairly neat.

Here
you can find a how-to that was written by Noricum.
It's really well explained, no need for me to re-write what she's already so
perfectly stated. Just notice that if you want a border around your progress
bar but not around the title, you'll have to create a table inside the table,
and to take into account the width of the border and add it to the total width
of the table.

Olympic project :

100%

Cabled cardigan :

12%

Now, the code :
<table width="200"
border="0" cellspacing="0" cellpadding="0">

<tr>

<td colspan="2" ><strong><em>Olympic project
:</em></strong></td>

</tr>

<tr>

<table width="152" border="1" cellspacing="0"
cellpadding="0" bordercolor="pink">

<tr>

<td width="100%" height="30px" bgcolor="#FFCCCC"
align="center"><strong>100%</strong></td>

</tr>

</table>

</tr>

<tr>

<td colspan="2"><strong><em>Cabled cardigan
:</em></strong></td>

</tr>

<tr>

<table width="152" border="1" cellspacing="0"
cellpadding="0" bordercolor="pink">

<tr>

<td width="12%" height="30px" bgcolor="#FFCCCC"
align="center">&nbsp;</td>

<td width="88%" height="30px" bgcolor="#FFFFFF"
align="center"><strong>12%</strong></td>

</tr>

</table>

</tr>

</table>

Quite easy to implement, but that's a lot of coding, maybe too much to my liking... and it's not really pretty either...

3 - Cascading Style Sheet bar

Another very interesting one to try : here is the link
to the Knitticisms page that explains it all.

It's just a 1 pixel wide image that you set as the background of a division,
and you stretch this background image to the width you want, consistent with
the percentage of progress done... Simple but clever.

My interpretation of this idea is slightly different but the result doesn't
differ much. I chose to create two classes, the first one is just the bar, empty,
and the second one is the color representing the progress of the work. In the
HTML code, The second is nested inside the first, and is given a width consistent
with the percentage of progress done...

Olympic project :

100%

Cabled cardigan :

12%

The style sheet code (to be written in the "head" section of the
html page) :

<style>

.bar { height: 30px; width: 150px; border: 1px pink solid; background-color:
#ffffff;}

.progress { height: 30px; background-color: #ffccff;}

</style>

The html code, to be written where you want your bar to be, X
stands for the percentage of work done:

<strong><em>your project's name:</em></strong>


<div class="bar">

<div class="progress" style="width: Xpx" align="center">

<strong>X%</strong>

</div>

</div>

4 - Plain and simple images

I found this brilliant idea on the weblog of Mc
Crochets. All you have to do is create a set of images, let's say 1 for
every 5% more achieved (that would be 20 images), then you'll just have to insert
them in your page, changing the image name as the project grows.

So <img src="(path)/75percent.gif">
would become <img src="(path)/80percent.gif">

However, there's no reason why the image should actually be a bar, variations in that rang of ideas are endless...

my take to it :

Olympic project :

100%

Cabled cardigan :


12%

In my exemple I chose to use images of hearts I already created, so that my
bar would match my page theme,

• a big heart stands for 10%


• a medium size one for 5%


• a small one for less than
  5%

I think the result is cute. Really. But not striking.

Last, but not least, ladies and gentlemen, fellow yarn addicts, let me introduce
you to ...

5 - Indigirl's
handy dandy progress tracker

I think I found the perfect one, it's so cute... I just would need to draw my
own images, to make it more personal. Anyway this stuff is neat...

http://www.indigirl.com/knit_tracker/

But it looks like I have a feww difficulties running it correctly...

 

Tell me... what would YOU choose?