Brick-Progressbar Demo

Simple Progressbar with Value

    <brick-progressbar value="60"></brick-progressbar>

Simple Progressbar without Value - Intermediate

    <brick-progressbar intermediate></brick-progressbar>

Progressbar with Status

    <brick-progressbar class="inter"  showStatus value="20"></brick-progressbar>

Striped

    <brick-progressbar showStatus value="15" striped></brick-progressbar>

Striped and Active

    <brick-progressbar showStatus value="20" striped active></brick-progressbar>

Types of Progressbar

        <brick-progressbar showStatus value="20" striped active type="success"></brick-progressbar>
        <brick-progressbar showStatus value="20" striped active type="info"></brick-progressbar>
        <brick-progressbar showStatus value="20" striped active type="danger"></brick-progressbar>
        <brick-progressbar showStatus value="20" striped active type="warning"></brick-progressbar>

Set Progress from JavaScript

    <brick-progressbar showStatus id="p1" value="20" striped active></brick-progressbar>
    <button onclick="document.getElementById('p1').value=40;">Click to Set 40%</button>

Min/Max

    <brick-progressbar showStatus min="100" max="900" id="p2" value="300" striped active></brick-progressbar>
    <button onclick="document.getElementById('p2').value=800;">Click to Set 800</button>

Min/Max with Showing Actual Values

    <brick-progressbar showStatus min="100" max="900" showActualValue id="p3" value="300" striped active></brick-progressbar>
    <button onclick="document.getElementById('p3').value=800;">Click to Set 800</button>

Play with various boolean options

    <brick-progressbar showStatus min="100" max="900"  id="p4" value="300" striped active></brick-progressbar>
    <button onclick="document.getElementById('p4').showStatus=!document.getElementById('p4').showStatus;">Toggle - showStatus</button>
    <button onclick="document.getElementById('p4').striped=!document.getElementById('p4').striped;">Toggle - striped</button>
    <button onclick="document.getElementById('p4').active=!document.getElementById('p4').active;">Toggle - active</button>
    <button onclick="document.getElementById('p4').showActualValue=!document.getElementById('p4').showActualValue;">Toggle - showActualValue</button>
    <button onclick="document.getElementById('p4').intermediate=!document.getElementById('p4').intermediate;">Toggle - intermediate</button>
    <button onclick="document.getElementById('p4').type='default';">Default</button>
    <button onclick="document.getElementById('p4').type='success';">Success</button>
    <button onclick="document.getElementById('p4').type='warning';">Warning</button>
    <button onclick="document.getElementById('p4').type='info';">Info</button>
    <button onclick="document.getElementById('p4').type='danger';">Danger</button>