PROGRESS BAR

Progress Bar Style

photoshop
80
html / css
90
wordpress
85
magento
95
										
<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;
}										
										
									

OUR BRANDS

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor psum dolor sit ame

Lorem ipsum dolor sit amet, consectetur acing elit, sed do eiusmod tempor inciidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam inciidunt ut labore et dolore magna

  • 8901 Marmora Raod, Glasgow, D04 89GR

  • Telephone : (801) 4256 9856 Telephone : (801) 4256 9658

  • Email: Contact@devitems.us Website: www.devitems.com