PROGRESSBAR

										
<div class="col-sm-12">
<div class="skill-area">
<div class="skill">
<div class="skill-content">
<div class="skill">
<!-- PROGRESS START -->
<div class="progress">
<div class="lead">photoshop</div>
<div data-wow-delay="1.2s" data-wow-duration="1.5s" style="width: 80%; visibility: visible; animation-duration: 1.5s; animation-delay: 1.2s; animation-name: fadeInLeft;" data-progress="80%" class="progress-bar wow fadeInLeft animated"> <span>80</span></div>
</div>
<!-- PROGRESS END -->
<!-- PROGRESS START -->
<div class="progress">
<div class="lead">html / css</div>
<div data-wow-delay="1.2s" data-wow-duration="1.5s" style="width: 90%; visibility: visible; animation-duration: 1.5s; animation-delay: 1.2s; animation-name: fadeInLeft;" data-progress="90%" class="progress-bar wow fadeInLeft animated"><span>90</span> </div>
</div>
<!-- PROGRESS END -->
<!-- PROGRESS START -->
<div class="progress">
<div class="lead">wordpress</div>
<div data-wow-delay="1.2s" data-wow-duration="1.5s" style="width: 85%; visibility: visible; animation-duration: 1.5s; animation-delay: 1.2s; animation-name: fadeInLeft;" data-progress="85%" class="progress-bar wow fadeInLeft animated"><span>85</span> </div>
</div>
<!-- PROGRESS END -->
<!-- PROGRESS START -->
<div class="progress">
<div class="lead">magento</div>
<div data-wow-delay="1.2s" data-wow-duration="1.5s" style="width: 95%; visibility: visible; animation-duration: 1.5s; animation-delay: 1.2s; animation-name: fadeInLeft;" data-progress="95%" class="progress-bar wow fadeInLeft animated"><span>95</span> </div>
</div>
<!-- PROGRESS END -->
</div>
</div>
<!-- skill end -->
</div>
</div>
</div>
										
									

										
/*----- Skill -----*/
.skill {
padding-top: 16px;
}
.skill-content {
overflow: hidden;
padding-top: 40px;
}
.skill .progress-bar {
background-color: #282828;
}
.skill .progress .lead {
color: #333;
font-family: montserrat;
font-size: 13px;
font-weight: normal;
left: 0;
position: absolute;
text-transform: uppercase;
top: -35px;
z-index: 99;
}
.skill .progress {
background-color: #d1d1cf;
border-radius: 0;
box-shadow: none;
height: 5px;
margin-bottom: 78px;
overflow: visible;
position: relative;
}
.skill .progress-bar > span {
border: 1px solid #d1d1cf;
border-radius: 50%;
color: #ff4081;
float: right;
font-family: montserrat;
font-size: 11px;
font-weight: 700;
height: 35px;
margin-right: -14px;
margin-top: -43px;
padding: 7px;
position: relative;
width: 35px;
}