Progress Bar BBCode
Posted: 09 Mar 2010, 06:23
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:
BBCode:
HTML:
Helpline:
Example:
Demo:
[prog=35]Modification Progress[/prog]
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 1343 times
BBCode:
Code: Select all
[prog={NUMBER}]{TEXT}[/prog]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;"> {NUMBER}%</div></div></div>Code: Select all
Progress Bar: [prog=Percentage]Progresss Bar description[/prog]Code: Select all
[prog=35]Modification Progress[/prog][prog=35]Modification Progress[/prog]