CSS3 Skill Bar Animation

October 7, 2011

Hello guys, i was recently thinking about a redesign of my website and i got the idea to make this pretty simple tutorial where we will build the skill animation bar for your about page.

I remember this animations are only visible in Firefox, Safari and Chrome.

Let’s see how to create it.

HTML

As you can see just create a simple markup taking into account some things.

We create an unordered list and we put our skills,add the span tag and assign the class expand, create an em tag and insert the description of our skills.

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!

<div class="content">
<div class="col">
  <h2>My Skill</h2>
    <ul id="skill">
    <li><span class="expand html5"></span><em>HTML 5</em></li>
    <li><span class="expand css3"></span><em>CSS 3</em></li>
    <li><span class="expand jquery"></span><em>jQuery</em></li>
    <li><span class="expand photoshop"></span><em>Photoshop</em></li>
    <li><span class="expand dreamweaver"></span><em>Dreamweaver</em></li>
    </ul>
</div>
</div>

CSS

Now we see the focal point of the tutorial, let’s play our style of unordered list, and the “expand” class will the bar will be filled according to the width set as a percentage.

The div content is lower than the 2px div col so that it can the expand class to contain inside the li tags.

.content {
    width: 278px;
    margin: 0;
    position: relative;
    float: left;
    font-size: 12px;
    line-height: 2em;
    padding: 30px 0 30px;
}

.col {
    width: 280px;
}

#skill {
    list-style: none;
    padding-top: 30px;
}

#skill li {
    margin-bottom: 70px;
    background: #000;
    height: 5px;
    border-radius: 3px;
    border-left: 1px solid #111;
    border-top: 1px solid #111;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
}

#skill li em {
    position: relative;
    top: -30px;
}

.expand {
    height: 1px;
    margin: 2px 0;
    background: #2187e7;
    position: absolute;
    box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.4);
}

.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%;
    };
}

Conclusion

I hope that with this tutorial you learned how to create simple skill bar animation using only the CSS3 properties a valid alternative to the use of jQuery.