[rating itemreviewed=”How to Make Animated Skills Bar with CSS3″ rating=”10″ reviewer=”Filiz ÖZER” dtreviewed=”04.04.2013″ summary=”Best tutorial for about skills bar! Thanks for this” best=”10″ worst=”0″][/rating]

In this tutorial, we will see how to make an animated skills bar with CSS3. The script 100% free for our subscribers / readers. You can use this CSS3 skills bar on a personal portfolio blogs or CV templates. This is an awesome skills bar section developed from Daily Design Notes team. If you want use this section for free, just click download button and get it!

The Animated skill bars in CSS3 only. It uses an unordered list for creating the list of skills and a span tag inside them for the animated bar. The animation is done using the animation and @keyframes properties which only work in Firefox and Webkit browsers for now.

Live Preview Download

Step #1 CSS

Let’s play our awesome style of unordered list, and the “expand” class will the bar will be filled according to the width set as a percentage.

.skimiler{float: left;margin:-15px auto 0px 0px;width: 330px;}
.skiller {margin: 35px;font-size: 12px;line-height: 2em;position: absolute;}
.col { width:350px;}
#skill {list-style: none outside none;}
#skill li {background:#222222;height: 23px;margin-bottom: 20px;margin-left: -40px;width: 350px;}
#skill li em { position:relative; top:-22px;}
#skill li small { margin-left:10px;}
#skill span { color:#fff; padding-bottom:3px;}
.expand {background:#F60;height: 20px;position: absolute;left: 0;}

.html5       { width:70%;  -moz-animation:html5 2s ease-out;       -webkit-animation:html5 2s ease-out;        }
.css3        { width:90%;  -moz-animation:css3 2s ease-out;        -webkit-animation:css3 2s ease-out;         }
.jquery      { width:50%; -moz-animation: jquery 2s ease-out;   -webkit-animation: jquery 2s ease-out;      }
.photoshop   { width:10%;  -moz-animation:photoshop 2s ease-out;   -webkit-animation:photoshop 2s ease-out;    }
.dreamweaver { width:100%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out;  }

@-moz-keyframes html5       { 0%  { width:0px;} 100%{ width:70%;}   }
@-moz-keyframes css3        { 0%  { width:0px;} 100%{ width::90%;}	}
@-moz-keyframes jquery      { 0%  { width:0px;} 100%{ width::50%;}	}
@-moz-keyframes photoshop   { 0%  { width:0px;} 100%{ width::10%;}	}
@-moz-keyframes dreamweaver { 0%  { width:0px;} 100%{ width::100%;}	}

@-webkit-keyframes html5       { 0%  { width:0px;} 100%{ width:70%;}  }
@-webkit-keyframes css3        { 0%  { width:0px;} 100%{ width::90%;} }
@-webkit-keyframes jquery      { 0%  { width:0px;} 100%{ width::50%;} }
@-webkit-keyframes photoshop   { 0%  { width:0px;} 100%{ width::10%;} }
@-webkit-keyframes dreamweaver { 0%  { width:0px;} 100%{ width::100%;} }

Step #2 Usage

As you see below to each class is assigned a different class “html5, css3, jquery, photoshop, dreamweaver” that will be animated based on the width set in the CSS. If you want edit this sections please don’t forget to change CSS’s.

	

        

            
 %70HTML 5
            
 %90CSS 3
            
 %50jQuery
            
 %10Photoshop
            
 %100Dreamweaver
        
    

That’s it.! This is end of our little tutorial. I hope you benefit from this simple example. Always suggestions and possible corrections are welcome. Please share your comments with us if you have any questions or say “thanks” 🙂

Our last article was about How to use rel=”external” for WordPress with a JavaScript. We recommend you to read it also and please share this article on your social media profiles and also bookmark us.