phpBB • Progress Bar - Contribution Details

Progress Bar

Description
Feed: Simple CSS progress bar.

Author Phaxe
Last updated Thu Jul 25, 2013 2:00 am
Rating
(4)
Categories Misc

Public performance attribution has been waived.

Demo

<div style="background-color: #1a1a1a; height: 15px; padding: 5px; width: 350px;"> <span style="display: inline-block; height: 100%; width: 45%; background-color: #00BF40; color: #FFF; text-align: center;">45%</span> </div>

Settings

BBCode Usage: Select all: [progress]{NUMBER}[/progress]

HTML Replacement: Select all: <div style="background-color: #1a1a1a; height: 15px; padding: 5px; width: 350px;"> <span style="display: inline-block; height: 100%; width: {NUMBER}%; background-color: #00BF40; color: #FFF; text-align: center;">{NUMBER}%</span> </div>

Help Line: Select all: [progress]Any number between 1-100[/progress]

Revisions

Revisions

Version

phpBB Version(s)

Progress Edition

[ALT]

3.0.x

Validation time: Jul 25, 2013 2:00 am

BBCode Usage: Select all
[progress]{NUMBER}[/progress]

HTML Replacement: Select all
<div style="background-color: #1a1a1a; height: 15px; padding: 5px; width: 350px;"> <span style="display: inline-block; height: 100%; width: {NUMBER}%; background-color: #00BF40; color: #FFF; text-align: center;">{NUMBER}%</span> </div>

Help Line: Select all
[progress]Any number between 1-100[/progress]
Progress Edition with color

1

3.0.x

Validation time: Jul 30, 2014 8:43 am

BBCode Usage: Select all
[progress={COLOR}]{NUMBER}[/progress]

HTML Replacement: Select all
<div style="background-color: #1a1a1a; height: 15px; padding: 5px; width: 350px;"> <span style="display: inline-block; height: 100%; width: {NUMBER}%; background-color: {COLOR}; color: #FFF; text-align: center;">{NUMBER}%</span> </div>

Help Line: Select all
[progress=#color]Any number between 1-100[/progress]