JSFiddle - React, Tailwind, and code Playground

by social_quotient

HTML

<div id="percentMan" data-percent="14"></div>

CSS

#percentMan {
    height: 250px;
    background: #a3b5b5;
    display: inline-block;
    position: relative;
}
#percentMan img {
    max-height: 100%;
    position: relative;
}
#percentMan .bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: url('http://i.imgur.com/1ohpG3f.png');
    background-size: 100% auto;
}
#percentMan .percent {
    position: absolute;
    left: 120px;
    top: 50px;
    font-size: 48px;
    font-weight: bold;
    color: #018e98;
}

JavaScript

$.fn.manChart = function(speed){
    if(typeof speed == "undefined") speed = 1000;
    $pM = $(this);
    $pM.append(
        '<div class="bg"></div>' +
        '<img src="http://i.imgur.com/0jJV3Gr.png"/>' +
        '<div class="percent">0%</div>'
    );
    var $maxP = 80;
    var $percent = $pM.attr('data-percent');
    if($percent == 0){
        $maxP = 100;
    }
    var fillheight = $maxP - ($percent * $maxP / 100);
    $pM.find('.bg').animate(
        {'height':'+='  + fillheight + '%'},
        {
            duration: speed,
            step: function(now, fx){
                $pM.find('.percent').html(Math.ceil(100 - (now * 100 / $maxP)) + '%');
            }
        }
    );
}

$(document).ready(function() {
    $('#percentMan').manChart();
});