Progress Bar

demoprogressbar.jpg
Description
Simple CSS progress bar.
  • Author Phaxe
  • Last updated Thu Jul 25, 2013 2:00 am
  • Rating
    (2)
  • 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
    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]