Component with custom skills.
The code to generate the component is this:
<!-- skills -->
<div class="skills">
<h3>Front-End</h3>
<ul>
<li>
<strong>HTML</strong>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
<li>
<strong>CSS</strong>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="95"></div>
</div>
</li>
<li>
<strong>Javascript</strong>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="60"></div>
</div>
</li>
<li>
<strong>jQuery</strong>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="50"></div>
</div>
</li>
</ul>
</div>
<!-- /skills -->
<div class="skills-circle">
<ul>
<li>
<div class="circle-content p0" data-percent="50">
<span>0%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<strong>UI/UX Design</strong>
</li>
<li>
<div class="circle-content p0" data-percent="75">
<span>0%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<strong>HTML</strong>
</li>
<li>
<div class="circle-content p0" data-percent="80">
<span>0%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<strong>JavaScript</strong>
</li>
<li>
<div class="circle-content p0" data-percent="98">
<span>0%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<strong>PHP</strong>
</li>
<li>
<div class="circle-content p0" data-percent="100">
<span>0%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
<strong>ASP</strong>
</li>
</ul>
</div>