Style Switcher
Theme Colors
Header Color
  • support@ecada.com
  • (0123)-123-456-789

Theme components

Default size
Small
Progress bar medium
Progress bar medium
<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>
Progress bar color
Progress bar default
Progress bar primary
Progress bar aqua
Progress bar blue
Progress bar brown
Progress bar dark blue
Progress bar dark red
Progress bar green
Progress bar light green
Progress bar orange
Progress bar purple
Progress bar red
Progress bar teal
Progress bar yellow
<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>
Bootstrap Progress Bars
Stripped
85% Complete (success)
45% Complete (success)
80% Complete (success)
40% Complete (success)
68% Complete (success)
Stripped Animated
40% Complete (success)
55% Complete (success)
70% Complete (success)
85% Complete (success)
<!------------------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>
Circular Progress Bars
90%
75%
26%
64%
49%
37%
80%
85%
100%
78%
85%
70%
<div class="col-md-3 col-sm-6">
    <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-md-3 col-sm-6">
    <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-md-3 col-sm-6">
    <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-md-3 col-sm-6">
    <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-md-3 col-sm-6">
    <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-md-3 col-sm-6">
    <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-md-3 col-sm-6">
    <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-md-3 col-sm-6">
    <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-md-3 col-sm-6">
    <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-md-3 col-sm-6">
    <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-md-3 col-sm-6">
    <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>