Pure CSS3 Responsive Animated Skills Bar

Pure CSS3 Responsive Animated Skills Bar

Are you going to build personal portfolios website? If yes, then responsive animated skills bar which is built with pure CSS3 are commonly used to showcase your skills.

The skills bar represent the level of expertise or knowledge related to individual tasks. We added some nice looking animations to these skill bars that will provide a quicker connection to your viewers.

In this particular tutorial, I want to demonstrate how you can build CSS3 skill bars using keyframe animation. To make skill bar is completely possible by using JavaScript, However, CSS3 keyframes are growing in attractiveness with much wider browser support these days.

The skills bar can be designed in a horizontal way and show the rating in percentage. But there is another way to design them radially.

In our previous tutorial, we have created CSS radial progress bar which you can check for further details.

This kind of design technique usually found on particular portfolios or design studio websites. The animated bars represent a straight of knowledge linked to certain tasks – website design, illustration, branding, personal design, you title it!

Pure CSS3 Responsive Animated Skills Bar

It’s very simple and easy to make skills bar once you understand the properties and know how to animation/keyframes work together.

Let’s first have a look at HTML markup. We wrap up whole skills into one main div class name .codeconSkills and then each skillset wrapped with the div with a unique class name .codeconSkillbar

The Markup

<div id="codeconSkills">
  <div class="codeconSkillbar">
    <div id="codeconHTML"> 
      <span class="codeconSkillArea ">HTML</span>
      <span class="PercentText ">100%</span>
    </div>
  </div>
  <div class="codeconSkillbar">
    <div id="codeconCSS">
      <span class="codeconSkillArea ">CSS/CSS3</span>
      <span class="PercentText ">70%</span>
    </div>
  </div>
  <div class="codeconSkillbar">
    <div id="codeconjQuery">
      <span class="codeconSkillArea ">jQuery</span>
      <span class="PercentText ">40%</span>
    </div>
  </div>
</div>

Please note that we didn’t add all the animated skills bar, to get all you can see Demo or download the source code.

The CSS

The CSS properties are not too much complicated but there are few ideas worth discussing. Let’s have look structure of CSS.

First, we do styling the main wrapper and all we will set the font-size and the height will be auto. The class .codeconSkillbar is a child of the main wrapper and we will apply few styles to make it look good.

We will set height:50px; which can be changed as per your need. we will add light gray background and it will always be full width so the colorful percentage background over it can be easily recognized.

#codeconSkills {
   font-size: 20px;
   height: auto;
}
.codeconSkillbar {
   height: 50px;
   position: relative;
   background: rgba(17, 17, 17, .3);
   margin: 20px auto;
}

Next, We will style the skills itself. In this case, we are going to style HTML skill. You can see in the demo that the HTML skill is 100% so we added the width to 100%.

A big thanks to CSS3 animation element which allow me to add animation on load the skills bar. The @keyframes allow us to set the animation From and To values.

#codeconHTML {
    width: 100%;
    animation: Animate-HTML 4s;
    -webkit-animation: Animate-HTML 4s;
    -moz-animation: Animate-HTML 4s;
    -o-animation: Animate-HTML 4s;
    height: 50px;
    position: absolute;
    background-color: #ea8564;
}
@keyframes Animate-HTML {
    from {
    width: 10px;
}
to {
    width: 100%}
}@-webkit-keyframes Animate-HTML {
    from {
    width: 10px;
}
to {
    width: 100%}
}@-moz-keyframes Animate-HTML {
    from {
    width: 10px;
}
to {
    width: 100%}
}@-o-keyframes Animate-HTML {
    from {
    width: 10px;
}
to {
    width: 100%}
}

Similar, you can do with other skills bar. The CSS will be almost same but just change the width value according to progress bar percentage that you want to show for each skill.

Be creative using these animations to observe how they could go with your other future projects. You may also download my article source code and try building out more complex animations. You are allowed to freely used this into your free or commercial projects.

If you like this tutorial than Please leaves comments and share with your friends.

Code ExamplesYou May Also Like