Skill Bar 2
Utilizzando solo l'oggetto HTML
(fonte CodePen)
Web Development
Consulting
Branding & Identity
Graphic Design
CODICE IN OGGETTO HTML
<!-- partial:index.partial.html -->
<div class="container">
<div class="skills">
<!-- skill -->
<div class="skill">
<!-- title -->
<div class="skill-title">
Web Development
</div>
<!-- bar -->
<div class="skill-bar" data-bar="90"><span></span></div>
</div>
<!-- #skill -->
<!-- skill -->
<div class="skill">
<!-- title -->
<div class="skill-title">
Consulting
</div>
<!-- bar -->
<div class="skill-bar" data-bar="70"><span></span></div>
</div>
<!-- #skill -->
<!-- skill -->
<div class="skill">
<!-- title -->
<div class="skill-title">
Branding & Identity
</div>
<!-- bar -->
<div class="skill-bar" data-bar="60"><span></span></div>
</div>
<!-- #skill -->
<!-- skill -->
<div class="skill">
<!-- title -->
<div class="skill-title">
Graphic Design
</div>
<!-- bar -->
<div class="skill-bar" data-bar="80"><span></span></div>
</div>
<!-- #skill -->
</div>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$(".skills").addClass("active")
$(".skills .skill .skill-bar span").each(function() {
$(this).animate({
"width": $(this).parent().attr("data-bar") + "%"
}, 1000);
$(this).append('<b>' + $(this).parent().attr("data-bar") + '%</b>');
});
setTimeout(function() {
$(".skills .skill .skill-bar span b").animate({"opacity":"1"},1000);
}, 2000);
</script>
CODICE ESPERTO IN OGGETTO HTML (CSS)
.skills,
.skills .skill,
.skills .skill .skill-title,
.skills .skill .skill-bar {
width: 100%;
float: left;
}
.skills {
padding:15px;
}
.skills .skill {
margin-bottom: 30px;
}
.skills .skill .skill-title {
color: #000000;
margin-bottom: 10px;
font-weight: 400;
font-size: 14px;
text-align: left;
}
.skills .skill .skill-bar {
width: 0;
height: 6px;
background: #f0f0f0;
transition: 1s cubic-bezier(1, 0, .5, 1);
-webkit-transition: 1s cubic-bezier(1, 0, .5, 1);
-ms-transition: 1s cubic-bezier(1, 0, .5, 1);
}
.skills.active .skill .skill-bar {
width: 100%;
}
.skills .skill .skill-bar span {
float: left;
width: 0%;
background: #1D91F2;
height: 6px;
position: relative;
transition: 1s cubic-bezier(1, 0, .5, 1);
-webkit-transition: 1s cubic-bezier(1, 0, .5, 1);
-ms-transition: 1s cubic-bezier(1, 0, .5, 1);
}
.skills .skill .skill-bar span b {
float: left;
width: 100%;
position: relative;
text-align: right;
opacity: 0;
font-size: 14px;
color: #000000;
font-weight: 400;
top: -20px;
}
.container{
width: 100%;
max-width: 600px;
padding:0 15px;
margin:0 auto;
}