[PHP] [WITH SOURCE] Simple Progress Bar

This is just a simple progress bar script I made with in 30 minutes in PHP.

It gets the value of the percentage from the URL via $_GET and if it is empty, not numeric or it is more than 100, it will set its default value to 100.
The script also writes the value of percentage slap-bang in the centre of the image.

I will post the script below, but you will need to manually save the images yourself, alternatively, you can download the full package by clicking here.

progressbar.php

PHP Code:

---

<?php
//fix headers
ob_start();

//create the image
$progress = imagecreate( 208, 28 );

//start the image
$start = imagecreatefrompng( "start.png" );
imagecopy( $progress, $start, 0, 0, 0, 0, imagesx( $start ), imagesy( $start ) );

//get value of percentage
$percent = strip_tags( $_GET['p'] );
if( ( empty( $percent ) ) || ( $percent > 100 ) || ( !is_numeric( $percent ) ) ) $percent = "100";

//put the middle image in
$middle = imagecreatefrompng( "middle.png" );
for( $i = 6; $i <= ( $percent * 2 ); $i++ )
{
    imagecopy( $progress, $middle, $i, 0, 0, 0, imagesx( $middle ), imagesy( $middle ) );
}

//put the percentage value in text
$black = imagecolorallocate( $progress, 0, 0, 0 );
imagestring( $progress, 4, ( $i / 2 ) - 7, 6, $percent . "%", $black );

//end the image
$end = imagecreatefrompng( "end.png" );
imagecopy( $progress, $end, $i, 0, 0, 0, imagesx( $end ), imagesy( $end ) );

//output the image
header( "Content-Type: image/PNG" );
imagepng( $progress );
imagedestroy( $progress );

ob_flush();
?>

---

Save these images in the same directory as progessbar.php

start.png
http://www.mark-eriksson.com/projects/ProgressBar/start.png

middle.png
http://www.mark-eriksson.com/projects/ProgressBar/middle.png

end.png
http://www.mark-eriksson.com/projects/ProgressBar/end.png

I hope you enjoy this, if you use this please leave credits ;)

If you want to see a live demo to this, click here

The Password to the .RAR file is (as always)

Code:

---

m0nstadot

---

Thanks,
- m0nsta.

this is cool n all but with the lower number percent it doesnt show the way you want. it would be better if you had a fixed bg with the red as the slider to show percentage of completion.

Why don't you have a background and then print the amount on there instead of a size? Or have it so it has like say my number was 45 it would be 45% lighter then dark and have the percentage?

Quote:

---

Originally Posted by Putako

Why don't you have a background and then print the amount on there instead of a size? Or have it so it has like say my number was 45 it would be 45% lighter then dark and have the percentage?

---

opacity = fail as a progress bar.

for a progress bar you want to make it look and show like how you would want to look like.

wow, I was searching this PHP Script. Thanks !