[BBCODE] Animated Progress Bar BBCode

[Stoker]

Demo:

75%

75%

BBCode:

Code: Select all

[anipro]{NUMBER1},{NUMBER2}[/anipro]

HTML:

Code: Select all

<p class="progressBar">
<span><em style="left:{NUMBER1}px">{NUMBER2}%</em></span>
</p><p style="margin-top:-3.05em; padding-left:6em; position:relative; color:gold; font-weight:bold;">{NUMBER2}%</p>

Helpline:

Code: Select all

Anipro: [anipro]% progress of 200,% progress[/anipro]

Example:

Code: Select all

[anipro]160,75[/anipro]

Open styles/prosilver/theme/colours.css
At the bottom add:

Code: Select all

.progressBar{
	width:216px;
	height:41px;
	background:url("{T_THEME_PATH}/images/bg_bar.gif") no-repeat 0 0;
	position:relative;
}
.progressBar span{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	background:url("{T_THEME_PATH}/images/bar.gif") no-repeat 0 0;
	top:8px;
	left:8px;
	overflow:hidden;
	text-indent:-8000px;
}
.progressBar em{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	background:url("{T_THEME_PATH}/images/bg_cover.gif") repeat-x 0 0;
	top:0;
}

anipro.zip

Credits: http://cssglobe.com

[Terr0r]

I have set this on my forum everything is okay the bar is working but only the numbers is not display

I have refresh me template, theme's and imageset and purge the cache

bar.png

is there someone can say me what I must do to fix that ?

[Stoker]

Use this html for the bbcode:

Code: Select all

<p class="progressBar">
<span><em style="left:{NUMBER1}px">{NUMBER2}%</em></span>
</p><p style="margin-top:-3.05em; padding-left:6em; position:relative; color:gold; font-weight:bold;">{NUMBER2}%</p>

Its not in first post.

[Terr0r]

Thanks stoker you are the best