JSFiddle - React, Tailwind, and code Playground

jQuery Animated Percentage Bars

by Jennifer Perrin

HTML

<div id="container">
    <div id="bar-1" class="bar-main-container azure">
        <div class="wrap">
            <div class="bar-percentage" data-percentage="35"></div>
            <div class="bar-container">
                <div class="bar"></div>
            </div>
        </div>
    </div>
    <div id="bar-2" class="bar-main-container emerald">
        <div class="wrap">
            <div class="bar-percentage" data-percentage="60"></div>
            <div class="bar-container">
                <div class="bar"></div>
            </div>
        </div>
    </div>
    <div id="bar-3" class="bar-main-container violet">
        <div class="wrap">
            <div class="bar-percentage" data-percentage="85"></div>
            <div class="bar-container">
                <div class="bar"></div>
            </div>
        </div>
    </div>
    <div id="bar-4" class="bar-main-container yellow">
        <div class="wrap">
            <div class="bar-percentage" data-percentage="90"></div>
            <div class="bar-container">
                <div class="bar"></div>
            </div>
        </div>
    </div>
    <div id="bar-5" class="bar-main-container red">
        <div class="wrap">
            <div class="bar-percentage" data-percentage="96"></div>
            <div class="bar-container">
                <div class="bar"></div>
            </div>
        </div>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway);
body { background: #f0f0f0; }

#container {
    text-align: center;
    margin: 20px;
}
.bar-main-container {
    margin: 10px auto;
    width: 500px;
    height: 50px;
    font-family: sans-serif;
    font-weight: normal;
    font-size: 0.8em;
    color: #fff;
}
.wrap {
    padding: 8px;
}
.bar-percentage {
    float: left;
    background: rgba(0, 0, 0, 0.13);
    padding: 9px 0px;
    width: 10%;
    height: 16px;
    font-family: 'Raleway', sans-serif;
}
.bar-container {
    float: right;
    height: 10px;
    background: rgba(0, 0, 0, 0.13);
    width: 85%;
    margin: 12px 10px 12px 0;
    overflow: hidden;
}
.bar {
    float: left;
    background: #FFF;
    height: 100%;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}
/* COLORS */
 .azure { background: #38B1CC; }
.emerald { background: #2CB299; }
.violet { background: #8E5D9F; }
.yellow { background: #EFC32F; }
.red { background: #E44C41; }

JavaScript

$('.bar-percentage[data-percentage]').each(function () {
    var progress = $(this);
    var percentage = Math.ceil($(this).attr('data-percentage'));
    $({
        countNum: 0
    }).animate({
        countNum: percentage
    }, {
        duration: 2000,
        easing: 'linear',
        step: function () {
            // What todo on every count
            var pct = Math.floor(this.countNum) + '%';
            progress.text(pct) && progress.siblings().children().css('width', pct);
        }
    });
});