Skip to content

Instantly share code, notes, and snippets.

@boschDev

boschDev/skills.html

Last active October 25, 2016 18:48
Show Gist options
  • Save boschDev/b70e9e9dfb5132e4c2be948b26047d55 to your computer and use it in GitHub Desktop.
Save boschDev/b70e9e9dfb5132e4c2be948b26047d55 to your computer and use it in GitHub Desktop.
Download ZIP
A jquery skills animation.
Raw
skills.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
.skillbar {
position:relative;
display:block;
margin-bottom:15px;
width:100%;
background:#eee;
height:35px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-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;
}
.skillbar-title {
position:absolute;
top:0;
left:0;
width:110px;
font-weight:bold;
font-size:13px;
color:#ffffff;
background:#6adcfa;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:4px;
-moz-border-radius-topleft:3px;
-moz-border-radius-bottomleft:3px;
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;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-bottomleft:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
.skillbar-bar {
height:35px;
width:0px;
background:#6adcfa;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.skill-bar-percent {
position:absolute;
right:10px;
top:0;
font-size:11px;
height:35px;
line-height:35px;
color:#ffffff;
color:rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<div class="skillbar" data-percent="80" data-title="HTML5" data-color="#d35400"></div>
<div class="skillbar" data-percent="90" data-title="CSS" data-color="#6600ff"></div>
<div class="skillbar" data-percent="60" data-title="JS" data-color="#ff0000"></div>
<div class="skillbar" data-percent="95" data-title="PHP" data-color="#3498db"></div>
<script>
$(document).ready(function(){
function color(color, percent) {
var f=parseInt(color.slice(1),16),t=percent<0?0:255,p=percent<0?percent*-1:percent,R=f>>16,G=f>>8&0x00FF,B=f&0x0000FF;
return "#"+(0x1000000+(Math.round((t-R)*p)+R)*0x10000+(Math.round((t-G)*p)+G)*0x100+(Math.round((t-B)*p)+B)).toString(16).slice(1);
}
$('.skillbar').each(function(){
var barColor = $(this).attr('data-color');
var titleColor = color(barColor,-0.1);
var title = $(this).attr('data-title');
var percent = $(this).attr('data-percent')+'%';
$(this).html('<div class="skillbar-title" style="background: '+titleColor+';"><span>'+title+'</span></div><div class="skillbar-bar" style="background: '+barColor+';"></div><div class="skill-bar-percent"></div>');
$(this).find('.skill-bar-percent').text(percent);
$(this).find('.skillbar-bar').animate({
width: percent
},3000);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment