CODICE IN OGGETTO HTML
<!-- partial:index.partial.html -->
<div class="skillbar clearfix " data-percent="65%">
<div class="skillbar-title" style="background: #88cd2a;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #88cd2a;"></div>
<div class="skill-bar-percent">65%</div>
</div>
<!--- CSS --->
<div class="skillbar clearfix " data-percent="85%">
<div class="skillbar-title" style="background: #00a8ff;"><span>CSS</span></div>
<div class="skillbar-bar" style="background: #00a8ff;"></div>
<div class="skill-bar-percent">85%</div>
</div>
<!---- /CSS --->
<!----- jQuery ------->
<div class="skillbar clearfix " data-percent="60%">
<div class="skillbar-title" style="background: #ff5c00;"><span>PHP</span></div>
<div class="skillbar-bar" style="background: #ff5c00;"></div>
<div class="skill-bar-percent">60%</div>
</div>
<!----- /jQuery ------->
<!-- partial -->
<script>
jQuery('.skillbar').each(function(){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},2000);
});
</script>
CODICE ESPERTO IN OGGETTO HTML (CSS)
.skillbar {
font-family: "Open Sans", "sans-serif";
position: relative;
display: block;
margin-bottom: 15px;
width: 100%;
background: #eee;
height: 35px;
border-radius: 4px;
transition: 0.4s linear;
transition-property: width, background-color;
}
.skillbar-title {
position: absolute;
top: 0;
left: 0;
font-weight: bold;
font-size: 13px;
color: #fff;
background: #6adcfa;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.skillbar-title span {
display: block;
background: rgba(0, 0, 0, 0.1);
padding: 0 20px;
height: 35px;
line-height: 35px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.skillbar-bar {
height: 35px;
width: 0px;
background: #6adcfa;
}
.skill-bar-percent {
position: absolute;
right: 10px;
top: 0;
font-size: 11px;
height: 35px;
line-height: 35px;
color: #444;
color: rgba(0, 0, 0, 0.4);
}