JSFiddle - React, Tailwind, and code Playground

by denniswaltermartinez

HTML

<div id="ranks-js">
    <div class="rating-bar-bg-overall" title="85%">
        <div class="rating-bar" title="85%" data-size="20"><span id="overall" class="rb-label">Overall</span>

        </div>
    </div>
    <div class="rating-bar-bg" title="87%">
        <div class="rating-bar" title="87%" data-size="87"><span class="rb-label">Design</span>

        </div>
    </div>
    <div class="rating-bar-bg" title="91%">
        <div class="rating-bar" title="91%" data-size="91"><span class="rb-label">Performance</span>

        </div>
    </div>
    <div class="rating-bar-bg" title="86%">
        <div class="rating-bar" title="86%" data-size="86"><span class="rb-label">Hardware</span>

        </div>
    </div>
    <div class="rating-bar-bg" title="85%">
        <div class="rating-bar" title="85%" data-size="60"><span class="rb-label">Software</span>

        </div>
    </div>
    <div class="rating-bar-bg" title="75%">
        <div class="rating-bar" title="75%" data-size="30"><span class="rb-label">Battery Life</span>

        </div>
    </div>
</div>

CSS

#rank-bar {
    margin: 1em 0 2em 0;
}
#rank-bar-score {
    display: inline-block;
}
#ranks-js {
    margin-bottom: 1.5em;
}
.rating-bar {
    width: 0;
    line-height: 2;
    background-color: #1a1a1a;
    outline: none;
    -moz-border-radius: 2px 0 0 2px;
    -webkit-border-radius: 2px 0 0 2px;
    border-radius: 2px 0 0 2px;
    -moz-transition: background-color 0.5s linear 0s;
    -webkit-transition: background-color 0.5s linear 0s;
    transition: background-color 0.5s linear 0s;
}
.rating-bar-bg {
    width: auto;
    background-color: #1a1a1a;
    margin: 0.5em 0 0 1em;
    border: 1px solid #090909;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.rating-bar-bg-overall {
    width: auto;
    background-color: #1a1a1a;
    margin: 0.5em 0;
    border: 1px solid #090909;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.rb-label {
    width: 10em;
    max-width: 350px;
    display: block;
    color: #ebebeb;
    font-weight: bold;
    text-shadow: 2px 1px 0 #222222;
    text-transform: uppercase;
    margin-left: 0.5em;
}
#overall {
    font-size: 1.25em;
}

JavaScript

// wrap this in an anonymous to help namespace collisions.
// and to help with faster variable lookup.
;(function (document, $) {

    $(document).ready(function () {
        $('.rating-bar').each(function () {
            var _this = $(this),
                size = _this.data('size');

            _this.animate({
                width: size + '%'
            }, {
                duration: 2500,
                step: function (progress) {
                    _this.css({
                        backgroundColor: progressColor(progress)
                    });
                }
            });
        });
    });

    function progressColor(progress) {
        if (progress >= 0 && progress <= 24) return '#a41818';
        else if (progress >= 25 && progress <= 49) return '#87581c';
        else if (progress >= 50 && progress <= 74) return '#997815';
        else if (progress >= 75 && progress <= 89) return '#659a1f';
        else if (progress >= 90 && progress <= 100) return '#659a1f';
    }
})(document, jQuery);