<div class="progress progress-sm">
    <div class="progress-bar" role="progressbar" data-value-progress="60">
        <span class="value-progress">Small</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar" role="progressbar" data-value-progress="80">
        <span class="value-progress">Progress bar medium</span>
    </div>
</div>
<div class="progress progress-lg">
    <div class="progress-bar" role="progressbar" data-value-progress="50">
        <span class="value-progress">Progress bar medium</span>
    </div>
</div>

<div class="progress">
    <div class="progress-bar" role="progressbar" data-value-progress="60">
        <span class="value-progress">Progress bar default</span>
    </div>
</div>
<div class="progress progress-primary">
    <div class="progress-bar" role="progressbar" data-value-progress="45">
        <span class="value-progress">Progress bar primary</span>
    </div>
</div>
<div class="progress progress-aqua">
    <div class="progress-bar" role="progressbar" data-value-progress="89">
        <span class="value-progress">Progress bar aqua</span>
    </div>
</div>
<div class="progress progress-blue">
    <div class="progress-bar"  role="progressbar" data-value-progress="50">
        <span class="value-progress">Progress bar blue</span>
    </div>
</div>
<div class="progress progress-brown">
    <div class="progress-bar"  role="progressbar" data-value-progress="70">
        <span class="value-progress">Progress bar brown</span>
    </div>
</div>
<div class="progress progress-dark-blue">
    <div class="progress-bar"  role="progressbar" data-value-progress="65">
        <span class="value-progress">Progress bar dark blue</span>
    </div>
</div>
<div class="progress progress-dark-red">
    <div class="progress-bar"  role="progressbar" data-value-progress="40">
        <span class="value-progress">Progress bar dark red</span>
    </div>
</div>
<div class="progress progress-green">
    <div class="progress-bar"  role="progressbar" data-value-progress="55">
        <span class="value-progress">Progress bar green</span>
    </div>
</div>
<div class="progress progress-light-green">
    <div class="progress-bar"  role="progressbar" data-value-progress="60">
        <span class="value-progress">Progress bar light green</span>
    </div>
</div>
<div class="progress progress-orange">
    <div class="progress-bar"  role="progressbar" data-value-progress="49">
        <span class="value-progress">Progress bar orange</span>
    </div>
</div>
<div class="progress progress-purple">
    <div class="progress-bar"  role="progressbar" data-value-progress="78">
        <span class="value-progress">Progress bar purple</span>
    </div>
</div>
<div class="progress progress-red">
    <div class="progress-bar"  role="progressbar" data-value-progress="92">
        <span class="value-progress">Progress bar red</span>
    </div>
</div>
<div class="progress progress-teal">
    <div class="progress-bar"  role="progressbar" data-value-progress="37">
        <span class="value-progress">Progress bar teal</span>
    </div>
</div>
<div class="progress progress-yellow">
    <div class="progress-bar"  role="progressbar" data-value-progress="57">
        <span class="value-progress">Progress bar yellow</span>
    </div>
</div>

<!------------------Striped------------------>
<div class="progress progress-striped">
    <div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%">
        <span class="sr-only">85% Complete (success)</span>
    </div>
</div>
<div class="progress progress-striped progress-green">
    <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
        <span class="sr-only">45% Complete (success)</span>
    </div>
</div>
<div class="progress progress-striped progress-orange">
    <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
        <span class="sr-only">80% Complete (success)</span>
    </div>
</div>
<div class="progress progress-striped progress-blue">
    <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
        <span class="sr-only">40% Complete (success)</span>
    </div>
</div>
<div class="progress progress-striped progress-red">
    <div class="progress-bar" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width: 68%">
        <span class="sr-only">68% Complete (success)</span>
    </div>
</div>
<!------------------Striped Animated------------------>
<div class="progress progress-striped progress-green active">
    <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
        <span class="sr-only">40% Complete (success)</span>
    </div>
</div>
<div class="progress progress-striped progress-orange active">
    <div class="progress-bar" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%">
        <span class="sr-only">55% Complete (success)</span>
    </div>
</div>
<div class="progress progress-striped progress-blue active">
    <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
        <span class="sr-only">70% Complete (success)</span>
    </div>
</div>
<div class="progress progress-striped progress-red active">
    <div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%">
        <span class="sr-only">85% Complete (success)</span>
    </div>
</div>

<div class="col-12 col-sm-6 col-md-3">
    <div class="knob-container">
        <inputclass="knob knob-brown" data-animate-value="90" data-bgColor="#fafafa" data-thickness=".05" value="0" data-displayInput="false" data-readOnly="true">
        <div class="knob-text">
            <label>Brown</label>
            <span>90%</span>
        </div>
    </div>
</div>
<div class="col-12 col-sm-6 col-md-3">
    <div class="knob-container">
        <inputclass="knob knob-green" data-animate-value="75" data-thickness=".05" value="0" data-displayInput="false" data-readOnly="true">
        <div class="knob-count">
            <span>75%</span>
        </div>
    </div>
</div>
<div class="col-12 col-sm-6 col-md-3">
    <div class="knob-container">
        <inputclass="knob knob-orange" data-animate-value="26" data-thickness=".05" value="0" data-displayInput="false" data-readOnly="true">
        <div class="knob-text">
            <label>Orange</label>
            <span>26%</span>
        </div>
    </div>
</div>
<div class="col-12 col-sm-6 col-md-3">
    <div class="knob-container">
        <input class="knob knob-dark-red" data-animate-value="64" data-thickness=".05" value="0" data-displayInput="false" data-readOnly="true">
        <div class="knob-text">
            <label>Dark Red</label>
            <span>64%</span>
        </div>
    </div>
    <div class="knob-container">
        <inputclass="knob knob-purple" data-animate-value="49" data-thickness=".05" value="0" data-displayInput="false" data-readOnly="true">
        <div class="knob-text">
            <label>Purple</label>
            <span>49%</span>
        </div>
    </div>
</div>
<div class="col-12 col-sm-6 col-md-3">
    <div class="knob-container">
        <inputclass="knob knob-aqua" data-animate-value="37" data-thickness=".05" value="0" data-displayInput="false" data-readOnly="true">
        <div class="knob-text">
            <label>Aqua</label>
            <span>37%</span>
        </div>
    </div>
</div>
<div class="col-12 col-sm-6 col-md-3">
    <div class="knob-container">
        <inputclass="knob knob-red" data-thickness=".05" data-animate-value="80" value="0" data-displayInput="false" data-readOnly="true">
        <div class="knob-text">
            <label>Red</label>
            <span>80%</span>
        </div>
    </div>
</div>
<div class="col-12 col-sm-6 col-md-3">
    <div class="knob-container">
        <inputclass="knob knob-dark-blue" data-thickness=".05" data-animate-value="85" value="0" data-displayInput="false" data-readOnly="true">
        <div class="knob-count">
            <span>85%</span>
        </div>
    </div>
</div>
<div class="col-12 col-sm-6 col-md-3">
    <div class="knob-container">
        <inputclass="knob knob-light-green" data-thickness=".05" data-animate-value="100" value="0" data-displayInput="false" data-readOnly="true">
        <div class="knob-count">
            <span>100%</span>
        </div>
    </div>
</div>
<div class="col-12 col-sm-6 col-md-3">
    <div class="knob-container">
        <inputclass="knob knob-teal" data-thickness=".05" data-animate-value="78" value="0" data-displayInput="false" data-readOnly="true">
        <div class="knob-text">
            <label>Teal</label>
            <span>78%</span>
        </div>
    </div>
</div>
<div class="col-12 col-sm-6 col-md-3">
    <div class="knob-container">
        <inputclass="knob knob-blue" data-thickness=".05" data-animate-value="85" value="0" data-displayInput="false" data-readOnly="true">
        <div class="knob-text">
            <label>Blue</label>
            <span>85%</span>
        </div>
    </div>
</div>
<div class="col-12 col-sm-6 col-md-3">
    <div class="knob-container">
        <inputclass="knob" data-fgcolor="#f1f1f1" data-bgColor="#cdcdcd" data-thickness=".05" data-animate-value="70" value="0" data-displayInput="false" data-readOnly="true">
        <div class="knob-text">
            <label>White</label>
            <span>70%</span>
        </div>
    </div>
</div>