Progress Bar BBCode

[BBCode Bot]

Progress Bar BBCode

Author: DrAcid
Description: This is a modification of the CSS Progress Bar BBCode. It adds simple graphics, ability to add a message to the progress bar(i.e. - tell, what that bar represents), while still having all the format editing options; reasonably puts percentage in [prog] tag, so forum can't be confused; makes percentage & bar resolution-flexible. 'Hope somebody will find it useful. Requires uploading of 2 small graphic files to /images/ folder. See attachment.
[valid][/valid]
Attached file:

progress.zip

(714 Bytes) Downloaded 1342 times

---

BBCode:

Code: Select all

[prog={NUMBER}]{TEXT}[/prog]

HTML:

Code: Select all

<div>{TEXT}<div style="background:url(images/prog_grey.png) repeat-x; background-color: #cccccc; border: 1px solid black; width:50%; margin-top: 2px;"><div style="background:url(images/prog_green.png) repeat-x;background-color: #008040; color: white; font-weight:bold; max-width:100%;  width:{NUMBER}%; height:18px;">&nbsp;&nbsp;&nbsp;{NUMBER}%</div></div></div>

Helpline:

Code: Select all

Progress Bar: [prog=Percentage]Progresss Bar description[/prog]

Example:

Code: Select all

[prog=35]Modification Progress[/prog]

Demo:
[prog=35]Modification Progress[/prog]