CSS Progress Bar BBCode

[BBCode Bot]

CSS Progress Bar BBCode

Author: Stoker
Description: The CSS Progress Bar inserts a configurable progress bar in the topics.

---

BBCode:

Code: Select all

[prog]{NUMBER}[/prog]

HTML:

Code: Select all

<div style="color: white; background-color: green; margin: 10px 0px 5px 0px; padding: 0px 10px 0px 10px; font-weight: bold; min-width:18px; max-width: 400px; width:{NUMBER}px; border: 1px solid black;">{NUMBER}%</div>

Helpline:

Code: Select all

Prog: [prog]Number between 1 and 100[/prog]

Example:

Code: Select all

[prog]15[/prog]

[prog]23[/prog]

[prog]46[/prog]

[prog]89[/prog]

[prog]100[/prog]

Demo:
[prog]15[/prog]

[prog]23[/prog]

[prog]46[/prog]

[prog]89[/prog]

[prog]100[/prog]

---

CSS Progress Bar 2

BBCode:

Code: Select all

[prog2]{NUMBER}[/prog2]

HTML:

Code: Select all

<div style="background-color: red; width:100px; border: 1px solid black;"><div style="background-color: green; color: white; font-weight:bold; max-width: 100px; width:{NUMBER}px;">&nbsp;&nbsp;&nbsp;{NUMBER}%</div></div>

Helpline:

Code: Select all

Prog2: [prog2]Number between 1 and 100[/prog2]

Example:

Code: Select all

[prog2]15[/prog2]

[prog2]23[/prog2]

[prog2]46[/prog2]

[prog2]89[/prog2]

[prog2]100[/prog2]

Demo:
[prog2]15[/prog2]

[prog2]23[/prog2]

[prog2]46[/prog2]

[prog2]89[/prog2]

[prog2]100[/prog2]