Home » Featured » Great CSS3 Animated Skill Bars

Great CSS3 Animated Skill Bars

Great styled Animated Skill Bars for your project or About Us page. This is a must have element for your website or next creative project…

animated_skills

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>

CSS3

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.

DEMO DOWNLOAD

Source: http://www.alessioatzeni.com/blog/css3-skill-bar-animation/

Tags :
Uzabila

About Uzabila

Web Design, WordPress developer & enthusiast. Co-Founder of CreativeVerse.com

Leave a Reply

Your email address will not be published. Required fields are marked *

*

If you are not a robot - solve an example: * Time limit is exhausted. Please reload the CAPTCHA.

Scroll To Top