Skillbars

Nice skillbars to add on your portfolio website.

by Martin Emanuelsson

HTML

<p><a class="btn skill-btn-1" href="#">Load skills</a> - <a class="btn skill-btn-2" href="#">Reload skills</a></p>

<p><b>HTML</b></p>
<div class="skill-frame">
  <div class="html"></div>
</div>

<p><b>CSS</b></p>
<div class="skill-frame">
  <div class="css"></div>
</div>

<p><b>PHP</b></p>
<div class="skill-frame">
  <div class="php"></div>
</div>

<p><b>Javascript</b></p>
<div class="skill-frame">
  <div class="javascript"></div>
</div>

CSS

.skill-frame {
  width: 100%;
  display: block;
  height: 10px;
  background: rgba(0, 0, 0, 0.2);
  margin-bottom: 20px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.html {
  opacity: 0;
  display: block;
  border-radius: 4px;
  height: 10px;
  width: 0%;
  background: #32b3ea;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.css {
  opacity: 0;
  display: block;
  border-radius: 4px;
  height: 10px;
  width: 0%;
  background: #32b3ea;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.php {
  opacity: 0;
  display: block;
  border-radius: 4px;
  height: 10px;
  width: 0%;
  background: #32b3ea;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.javascript {
  opacity: 0;
  display: block;
  border-radius: 4px;
  height: 10px;
  width: 0%;
  background: #32b3ea;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

JavaScript

// Skillbars
// Author: Martin Emanuelsson
// http://www.emanuelzone.se
// Download free at http://jsfiddle.net/emanuelzone/rxq8daw7/

$(document).ready(function() {
  $(".skill-btn-1").click(function(event) { // <-- Animate skills
    event.preventDefault();
    'use strict';
    var div = $(".html"); // <-- Choose your skill to display
    div.animate({
      width: '90%', // <-- Set the percent of your skill for each column
      opacity: '1'
    }, 1000); // <-- Set the speed for each skill animation
    var div = $(".css");
    div.animate({
      width: '85%',
      opacity: '1'
    }, 1400);
    var div = $(".php");
    div.animate({
      width: '30%',
      opacity: '1'
    }, 1600);
    var div = $(".javascript");
    div.animate({
      width: '50%',
      opacity: '1'
    }, 1800);
  });
    $(".skill-btn-2").click(function() { // <-- Reload skills
    'use strict';
    var div = $(".html");
    div.animate({
      width: '0%',
      opacity: '1'
    }, 1800);
    var div = $(".css");
    div.animate({
      width: '0%',
      opacity: '1'
    }, 1600);
    var div = $(".php");
    div.animate({
      width: '0%',
      opacity: '1'
    }, 1400);
    var div = $(".javascript");
    div.animate({
      width: '0%',
      opacity: '1'
    }, 1000);
  });
  console.log('Skillbars is ready.'); // <-- Make sure it works in your browser
});