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.
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.
HTML 5
CSS 3
jQuery
Photoshop
Dreamweaver
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.
missed it skimiler in markup HTML!
Great post… Thanks for sharing… Can you please share how to make animated circular skill sets, something like the one in this site ‘http://www.nolowenenowak.com/’
Ajeeth boaz, thanks you for your comment. I will try circular skill sets ok.
Thank you v much…