JSFiddle - React, Tailwind, and code Playground

Animate Skills 1 at a Time (stripped)

by Jennifer Perrin

HTML

<div class="skills-holder">
    <div class="skill">
        <label>HTML</label>
        <div class="skill-bar">
            <div data-level="90" class="level"></div>
        </div>
    </div>
    <div class="skill">
        <label>CSS</label>
        <div class="skill-bar">
            <div data-level="80" class="level"></div>
        </div>
    </div>
    <div class="skill">
        <label>jQuery</label>
        <div class="skill-bar">
            <div data-level="80" class="level"></div>
        </div>
    </div>
    <div class="skill">
        <label>JavaScript</label>
        <div class="skill-bar">
            <div data-level="70" class="level"></div>
        </div>
    </div>
    <div class="skill">
        <label>AJAX</label>
        <div class="skill-bar">
            <div data-level="60" class="level"></div>
        </div>
    </div>

    <div class="skill">
        <label>PHP</label>
        <div class="skill-bar">
            <div data-level="65" class="level"></div>
        </div>
    </div>
    <div class="skill">
        <label>MySQL</label>
        <div class="skill-bar">
            <div data-level="65" class="level"></div>
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway);
body { margin: 10px; font-family: 'Raleway'; }

.skills-holder {
    padding: 0 11px 20px !important;
}
.skill {
    margin-bottom: 6px;
}
.skill label {
    font-size: 20px;
    line-height: 26px;
}
.skill-bar {
    background-color: #ccc;
    height: 12px;
    width: 100%;
}
.skill-bar .level {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #444;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
    border-color: #222;
    border-image: none;
    border-right: 1px solid #111;
    border-style: solid;
    border-width: 1px;
    height: 10px;
    width: 0;
}

JavaScript

/*
 * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
 *
 * Uses the built in easing capabilities added In jQuery 1.1
 * to offer multiple easing options
 *
 * TERMS OF USE - jQuery Easing
 * 
 * Open source under the BSD License. 
 * 
 * Copyright © 2008 George McGinley Smith
 * All rights reserved.
 * 
 * Redistribution and use in source and binary forms, with or without modification, 
 * are permitted provided that the following conditions are met:
 * 
 * Redistributions of source code must retain the above copyright notice, this list of 
 * conditions and the following disclaimer.
 * Redistributions in binary form must reproduce the above copyright notice, this list 
 * of conditions and the following disclaimer in the documentation and/or other materials 
 * provided with the distribution.
 * 
 * Neither the name of the author nor the names of contributors may be used to endorse 
 * or promote products derived from this software without specific prior written permission.
 * 
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
 * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
 * OF THE POSSIBILITY OF SUCH DAMAGE. 
 *
*/

// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
	def: 'easeOutQuad',
	swing:...