JSFiddle - React, Tailwind, and code Playground

Animated Skill Bars

by Jennifer Perrin

HTML

<div class="skillbar clearfix " data-percent="80%">
    <div class="skillbar-title" style="background: #d35400;">
        <span>HTML5</span>
    </div>
    <div class="skillbar-bar" style="background: #e67e22;"></div>
    <div class="skill-bar-percent">80%</div>
</div>
<div class="skillbar clearfix " data-percent="25%">
    <div class="skillbar-title" style="background: #2980b9;">
        <span>CSS3</span>
    </div>
    <div class="skillbar-bar" style="background: #3498db;"></div>
    <div class="skill-bar-percent">25%</div>
</div>
<div class="skillbar clearfix " data-percent="50%">
    <div class="skillbar-title" style="background: #2c3e50;">
        <span>jQuery</span>
    </div>
    <div class="skillbar-bar" style="background: #2c3e50;"></div>
    <div class="skill-bar-percent">50%</div>
</div>
<div class="skillbar clearfix " data-percent="40%">
    <div class="skillbar-title" style="background: #46465e;">
        <span>PHP</span>
    </div>
    <div class="skillbar-bar" style="background: #5a68a5;"></div>
    <div class="skill-bar-percent">40%</div>
</div>
<div class="skillbar clearfix " data-percent="75%">
    <div class="skillbar-title" style="background: #333333;">
        <span>Wordpress</span>
    </div>
    <div class="skillbar-bar" style="background: #525252;"></div>
    <div class="skill-bar-percent">75%</div>
</div>
<div class="skillbar clearfix " data-percent="100%">
    <div class="skillbar-title" style="background: #27ae60;">
        <span>SEO</span>
    </div>
    <div class="skillbar-bar" style="background: #2ecc71;"></div>
    <div class="skill-bar-percent">100%</div>
</div>
<div class="skillbar clearfix " data-percent="70%">
    <div class="skillbar-title" style="background: #124e8c;">
        <span>Photoshop</span>
    </div>
    <div class="skillbar-bar" style="background: #4288d0;"></div>
    <div class="skill-bar-percent">70%</div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis);

body {
    font-family:'Dosis', sans-serif;
    margin: 20px;
}
.skillbar {
    position:relative;
    display:block;
    margin-bottom:15px;
    width:100%;
    background:#eee;
    height:35px;
    -webkit-transition:0.4s linear;
    -moz-transition:0.4s linear;
    -ms-transition:0.4s linear;
    -o-transition:0.4s linear;
    transition:0.4s linear;
    -webkit-transition-property:width, background-color;
    -moz-transition-property:width, background-color;
    -ms-transition-property:width, background-color;
    -o-transition-property:width, background-color;
    transition-property:width, background-color;
}
.skillbar-title {
    position:absolute;
    top:0;
    left:0;
    width:110px;
    font-weight:bold;
    font-size:13px;
    color:#ffffff;
    background:#6adcfa;
}
.skillbar-title span {
    display:block;
    background:rgba(0, 0, 0, 0.1);
    padding:0 20px;
    height:35px;
    line-height:35px;
}
.skillbar-bar {
    height:35px;
    width:0px;
    background:#6adcfa;
}
.skill-bar-percent {
    position:absolute;
    right:10px;
    top:0;
    font-size:11px;
    height:35px;
    line-height:35px;
    color:#ffffff;
    color:rgba(0, 0, 0, 0.4);
}

JavaScript

jQuery(document).ready(function () {
    jQuery('.skillbar').each(function () {
        jQuery(this).find('.skillbar-bar').animate({
            width: jQuery(this).attr('data-percent')
        }, 1750);
    });
});