Show off your skills with CSS animated bars

Learn how to present your skills in a appealing way with simple CSS bars.


Why animated skills bars?

For creative people, it is more than cricial to have a great online presence. What’s more, it is very important to show off your skills together with your work in a visually interesting way.

I have created a simple responsive solution allowing to create animated bars presenting your skills. As I absolutely love Zurb Foundation, I used it as a framework for these animated bars but you can use the main code in a framework of your choice.

How to use?


To create a skill bar you need the following code:

 <div class="SkillBar">
 <div id="Skill-HTML"> <span class="Skill-Area">HTML</span> <span class="PercentText fadeIn fadeIn-3s fadeIn-Delay-3sfadeIn fadeIn-3s fadeIn-Delay-3s">100%</span> </div>


This is the complicated part as you have styles for every bar you create and you also should create an animation for it. You also should name your animation and assign time to it. You also should give it a percentage. The percentage given shows how skilled you are in a particular area.

Main animated styles:

 #Skill-HTML {
 width: 100%;
 animation: Animate-HTML 4s;
 -webkit-animation: Animate-HTML 4s;
 -moz-animation: Animate-HTML 4s;
 -o-animation: Animate-HTML 4s;
 height: 45px;
 position: absolute;
 background-color: #F9690E;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 @keyframes Animate-HTML {
 a 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%}

Additional styles:

I created a fade in effect which is animates the percentages at the end of the animation.
There is a main .fadeIn animation class which gives the main styles, .fadeIn-3s is a class assigning time for the fade in effect and .fadeIn-Delay-3s which assigns a small delay of 3 seconds of the start of the fade in animation.

.fadeIn { /* CSS needed for animation */ opacity:0; -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; -o-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; -o-animation-fill-mode:forwards; animation-fill-mode:forwards; }
/* Animation Times - Time to fade in */
 .fadeIn-3s {
 /* Animation Delay - Time to be delayed  */
 .fadeIn-Delay-3s {

Responsive classes:

I have added some classes to tackle some responsive issues as I wanted these bars to look good on tables and smartphones.

The class – .responsive-percent – is applied to spans which are containing percentages lower than 100% as if you are using a smaller percent such as 25%, the text and the percentages stack together on small devices.

I assume that this is an adjustable class as depending on the length of the skill text and the percentages you may have some issues so always check how the bars will look like on smartphones. The current example looks good on all devices.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

@media only screen and (max-width: 40em) {
 .responsive-percent {
 margin-right: -45px !important;
 @media only screen and (min-width: 40.063em) and (max-width: 64em) {
 .responsive-percent {
 margin-right: -45px !important;

DEMO Download Animated Skills Bars

You may also like...