Progress bar [All versions, all engines?]

[Lithium]

How many of you get annoyed when your progress bars grow more than they should and ruin your layout? Also, how many of you are tired of the same old same progress bar styles? I've made a small replacement a while back for the progress bars which i decided noqw to share.

You can see them in action in http://www.deadlycountry.net

So here it go,

Name this file let's say bars.php and place it somewhere on your public_html folder

 

You're unable to view this code.

Viewing code within this forum requires registration, you can register here for free.

 

Progress bar image is attached to this post as well. If there is someone kind enough to make a layered psd out of it i would be much apprecciated, as i lost my original one :(

Now let's apply it on!

Where you have your progress bars, simply remove the code and replace it for:

 

You're unable to view this code.

Viewing code within this forum requires registration, you can register here for free.

 

Where $var should be: (check header.php) $enperc, $wiperc, $experc, $brperc, $hpperc.

This ones can be deleted afterwards: $enopp, $wiopp, $exopp, $bropp, $hpopp.

Finally, the progress bar can be at this sizes: 160*16 (as the above example), 140*14 ... (resize it on the same ratio for better looking). The image i provide looks bad below 100*10 so try to make it look at least decent :)

Any comments, good or bad (constructive) are always welcome!!

[Jordan Palmer]

Nice work bud =]

[CJ - Twitch]

Looks great but what if you want different color bars ;)

[Lithium]

Looks great but what if you want different color bars ;)

What about adding a $var to different images and then displaying them as requested? Is that hard? ;)

[CJ - Twitch]

:| I didn't think of that xD Will it work? 8|

[Lithium]

If you know what you are doing... yes! :whistling:

Something along these lines...

$chooseimg = array("yellow" => "images/yellow.png", "blue" => "images/blue.png", etc etc etc)

changing the $img accordingly...

$img = $img = loadpng($chooseimg[$_GET['type']]);

And finally... the display it self needs a bit tweaking...

This is untested and its only a guideline to achieve the result :)

[CJ - Twitch]

Thank you I will test it. :)

[CJ - Twitch]

Here is a crappy bar I made xD

[Lithium]

Thx for cjholder for the 2nd progress bar (the "crappy bar" one), added to the OP.

[CJ - Twitch]

Here is a better 'crappy' bar. :)

[Lithium]

Looks great but what if you want different color bars ;)

Following cjholder question, and his attempt to make it run, here it goes a working example on multiple images!

 

You're unable to view this code.

Viewing code within this forum requires registration, you can register here for free.

 

Finally displaying the images...

You're unable to view this code.

Viewing code within this forum requires registration, you can register here for free.

[CJ - Twitch]

Great work! It works perfectly. :)