pt-progressbar

Simple Progressbar with Value

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

Simple Progressbar without Value - Intermediate

    <pt-progressbar intermediate></pt-progressbar>
    

Progressbar with Status

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

Striped

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

Striped and Active

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

Types of Progressbar

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

Set Progress from JavaScript

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

Min/Max

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

Min/Max with Showing Actual Values

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

Play with various boolean options

    <pt-progressbar showStatus min="100" max="900"  id="p4" value="300" striped active></pt-progressbar>
    <button onclick="document.getElementById('p4').toggle('showStatus');">Toggle - showStatus</button>
    <button onclick="document.getElementById('p4').toggle('striped');">Toggle - striped</button>
    <button onclick="document.getElementById('p4').toggle('active');">Toggle - active</button>
    <button onclick="document.getElementById('p4').toggle('showActualValue');">Toggle - showActualValue</button>
    <button onclick="document.getElementById('p4').toggle('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>