Kişisel sitenizde hakkımda sayfasında yeteneklerinizi takipçilerinize göstermek isteyebilir, ya da iş akışında yaptığınız işlerdeki becerilerinizi yayınlamak isteyebilirsiniz. Bunun için hazır kodlamalar çok fazla mevcut. Aşağıda yer alan kodları kendi sitemde kullanmaktayım. Kodları düzenleyerek kullanabilirsiniz.
Kodlar:

jQuery & CSS3 Skills Bar
 

 
HTML5
 

 
20%
 
 

 
CSS3
 

 
25%
 
 

 
jQuery
 

 
50%
 
 

 
PHP
 

 
40%
 

Css Kodları:

.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);
}

jQuery Kodları:

İçeriği:

jQuery(document).ready(function(){
jQuery(‘.skillbar’).each(function(){
jQuery(this).find(‘.skillbar-bar’).animate({
width:jQuery(this).attr(‘data-percent’)
},6000);
});
});