I’m sure you have seen the little progress bars I have in the sidebar of this site (if you haven’t, look to your right). Now here is how you can do it on your own site. Note: This was not made by me, but had a note giving permission to share the script.

1. Copy the code below and paste it into a file in a text editor (I recommend Notepad++). Name it progress.php.

   <?php
   
   // DO NOT USE A HASH MARK "#" AS PART OF A HEX PARAMETER!
   // progress = progress bar colour (hex)
   // border = border colour (hex)
   // background = fill colour (hex)
   //
   //
   // This code is released into the public domain. Do with it what you will.
   // Function to Convert hex to a useable decimal array
   
   function hex2decarray($hex_value)
   
   { // Chop it up, hexdec it
    $dec_array = array(hexdec(substr($hex_value,0,2)),
                 hexdec(substr($hex_value,2,2)),
                 hexdec(substr($hex_value,4,2)));
    return $dec_array;
   }
   
   /* page output starts here */
   // Let the browser know a GIF is coming
   
   Header("Content-type: image/gif");
   // Grab the progress numbers
   
   $target = $_GET['target'];
   $current = $_GET['current'];
   
   // Grab the  hex colour codes - DO NOT USE A # in the parameter
   $background = $_GET['background'];
   $border = $_GET['border'];
   $progress = $_GET['progress'];
   
   // If we missed one, fill in the defaults
   if (!$_GET['progress'])
   $progress="2222DD";
   if (!$_GET['border'])
   $border = "000000";
   if (!$_GET['background'])
   $background="CCCCCC";
   
   // If there isn't a target number, this dodges a nasty divide-by-zero
   
   if ($target==0)
   {
     $current = 0;
    $target = 100;
   }
   
   // Percentages
   $percent = (($current*100)/$target);
   
   // If its over 100, write over the right-hand border
   if ($percent > 100) $percent = 101;
   
   // Width and height of the complete bar
   if ($width == 0) $width = 102;
   if ($height == 0) $height = 15;
   
   // Calculate colour arrays
   $bgc=hex2decarray($background);
   $bc=hex2decarray($border);
   $fc=hex2decarray($progress);
   
   // Generate empty image
   $image = ImageCreate($width,$height);
   
   // Colours
   $border = ImageColorAllocate($image,$bc[0],$bc[1],$bc[2]);
   $back = ImageColorAllocate($image,$bgc[0],$bgc[1],$bgc[2]);
   $fill = ImageColorAllocate($image,$fc[0],$fc[1],$fc[2]);
   
   // Draw the border
   ImageFilledRectangle($image,0,0,$width,$height,$border);
   
   // Draw the background over that
   ImageFilledRectangle($image,1,1,$width-2,$height-2,$back);
   if ($percent > 0)
   
   // Draw the progress bar over the background
   ImageFilledRectangle($image,1,1,$percent,$height-2,$fill);
   
   // Send the image to the browser
   ImageGIF($image);
   
   // Clean up
   ImageDestroy($image);
   
   ?>

2. Upload the file to your webserver.
3. To display the progress bar on your website, copy the following code and paste it into your design:

   <img src="http://LINKTOFOLDER/progress.php?current=#&target=100&progress=FFFFFF&background=000000&border=FF0000" />

   • Change LINKTOFOLDER to the URL of the folder your progress.php file is in, for example http://catherine-haines.com.
   • Change the # (current=#) to your percentage completed (take your current wordcount and divide it by your goal and multiply that by one hundred)
   • Change the colour scheme for the progress, background and border by changing the hex colour codes with your preferred ones

And that should be that! Your progress bar should now be nice and pretty wherever you inserted it.

If you have any problems either leave a comment below or contact me. Same goes for if you are using this progress bar – I’d love to see what you are working on!