Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A Pen by alfio.

Animated Skills Bar with jQuery e CSS3

Barra competenze animata e dinamica con jQuery e CSS3. Completa di testo variabile a seconda del link selezionato.

Dinamic and animated skills bar with jQuery and CSS3.

A Pen by alfio on CodePen.

License.

<div class="dettagli">
<span></span>
<!-- Descrizione a comparsa -->
</div>
<div class="skillbar">
<!-- Barra avanzamento -->
<div class="skillbar-title"><span></span>
</div>
<div class="skillbar-bar">
<div class="skill-bar-percent"></div>
</div>
</div>
<div class="elenchi">
<div class="col">
<h2>Software</h2>
<ul>
<li><span data-value="Buona Conoscenza" data-percent="50%">Dreamweaver</span>
</li>
<li><span data-value="Discreta Conoscenza" data-percent="80%">Coda 2</span>
</li>
</ul>
</div>
<div class="col">
<h2>Linguaggi</h2>
<ul>
<li><span data-value="Ottima Conoscenza" data-percent="90%">HTML5</span>
</li>
<li><span data-value="Eccellente Conoscenza" data-percent="100%">CSS3</span>
</li>
</ul>
</div>
</div>
<div class="source">Ispirazione iniziale: http://codepen.io/tamak/pen/hzEer</div>
$('.elenchi li span').click(function () {
$('.skillbar').fadeIn();
$('.dettagli').fadeIn();
var titolo = $(this).text();
var valore = $(this).attr('data-percent');
var dettagli = $(this).attr('data-value');
jQuery('.skillbar-bar').delay(0).animate({
width: valore
}, 1000);
jQuery('.skillbar-title span').html(titolo).css("text-transform", "uppercase");
jQuery('.skill-bar-percent').html(valore);
jQuery('.dettagli span').html(dettagli);
});
@import "compass/css3";
.dettagli {
font-family: Helvetica;
font-size: 1.5em;
color: grey;
margin-bottom: 40px;
margin-top: 50px;
display: none;
}
.elenchi {
font-family: Helvetica;
color: grey;
.col {
float: left;
margin-right: 50px;
}
li {
font-size: 0.9em;
margin-bottom: 5px;
span {
border-bottom: dotted 1px;
cursor: pointer;
color: green;
-moz-transition: all 0.3s linear 0s;
-webkit-transition: all 0.3s linear 0s;
-o-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
&:hover {
border-bottom: none;
color: red;
}
}
}
}
.skillbar {
display: none;
position:relative;
display:block;
margin-bottom:15px;
width:100%;
background:#999;
height:35px;
-webkit-transition:0.4s linear;
-moz-transition:0.4s linear;
-ms-transition:0.4s linear;
-o-transition:0.4s linear;
transition:0.4s linear;
-webkit-transition-property:width, background-color;
-moz-transition-property:width, background-color;
-ms-transition-property:width, background-color;
-o-transition-property:width, background-color;
transition-property:width, background-color;
.info {
position: absolute;
left: 70px;
top: 0;
height: 35px;
line-height: 35px;
font-family: Helvetica;
color: white;
text-align: right;
}
}
.skillbar-title {
font-family: Helvetica;
font-weight: bold;
position:absolute;
top:0;
left:0;
width:auto;
font-size:0.8em;
color:#ffffff;
background: green;
z-index: 2;
span {
display:block;
background:rgba(0, 0, 0, 0.1);
padding:0 20px;
height:35px;
line-height:35px;
}
}
.skillbar-bar {
height:35px;
width:0;
background: #006699;
position: relative;
z-index: 1;
}
.skill-bar-percent {
font-family: Helvetica;
font-weight: lighter;
position:absolute;
right:10px;
top:0;
font-size:0.8em;
height:35px;
line-height:35px;
color:white;
}
.source {
margin-top: 100px;
font-family: helvetica;
font-size: 10px;
color: grey;
clear:left;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment