Team page Progress bar

66.Team page Progress bar

Module position: position-2

Module class suffix: Not Used

If you want your module this way, Go to backend: Extensions --> Module Manager --> New --> Select type as Custom html with the settings below:

Step-1:

Create a new custom html module

Step-2:

Add the following html code in you Custom html module

<h6 class="upper">Hmtl 5</h6>
<div class="progress progress-success progress-striped" data-progress="90">
    <div class="bar"><small>90%</small>
    </div>
</div>
<h6 class="upper">CSS 3</h6>
<div id="progressBar" class="progress progress-success progress-striped" 
data-progress="80">
    <div class="bar"><small>80%</small>
    </div>
</div>
<h6 class="upper">Wordpress</h6>
<div class="progress progress-success progress-striped" data-progress="60">
    <div class="bar"><small>60%</small>
    </div>
</div>
<h6 class="upper">PHP/MySQL</h6>
<div class="progress progress-success progress-striped" data-progress="40">
    <div class="bar"><small>40%</small>
    </div>
</div>
<h6 class="upper">e-commerce</h6>
<div class="progress progress-success progress-striped" data-progress="100">
    <div class="bar"><small>100%</small>
    </div>
</div>

Step-3:

Once the module is created SAVE & CLOSE The settings.