JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div class="rating-bar-bg-overall" title="87%">
    <div class="rating-bar" style="width:87%;" title="87%" data-size="87">
        <span id="overall" class="rb-label">Overall</span>
    </div>
</div>

<div class="rating-bar-bg" title="88%">
    <div class="rating-bar" style="width:88%;" title="88%" data-size="88">
        <span class="rb-label">Design</span>
    </div>
</div>

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

<div class="rating-bar-bg" title="93%">
    <div class="rating-bar" style="width:93%;" title="93%" data-size="100">
        <span class="rb-label">Hardware</span>
    </div>
</div>

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

<div class="rating-bar-bg" title="77%">
    <div class="rating-bar" style="width:77%;" title="77%" data-size="77">
        <span class="rb-label">Battery</span>
    </div>
</div>

CSS

.rating-bar-bg {
	width: auto;
	background-color: #1a1a1a;
	margin: 0.5em 0 0 1em;
	border: 1px solid #090909;
}
.rating-bar-bg-overall {
	width: auto;
	background-color: #1a1a1a;
	margin: 0.5em 0;
	border: 1px solid #090909;
}
.rating-bar {
	line-height: 2;
	background-color: #3a8d24;
	outline: none;
	transition: all 1s linear 0s;
    font-family: Tahoma, Verdana, sans-serif;
}
.rb-label {
	color: #ffffff;
	font-weight: bold;
	text-shadow: 2px 1px 0 #112a0a;
	text-transform: uppercase;
	margin-left: 0.5em;
}
#overall {
	font-size: 1.25em;
}

JavaScript

$('.rating-bar').css('background-color', function(){
    var percentage = parseInt($(this).data('size'), 10);
    if (percentage > 0 && percentage < 25){
        return '#a41818'
    }
    else if (percentage > 24 && percentage < 50) {
        return '#87581c';
    }
    else if (percentage > 49 && percentage < 75) {
        return '#997815';
    }
    else if (percentage > 74 && percentage < 90) {
        return '#7ba01c';
    }
    else if (percentage > 89 && percentage <= 100) {
        return '#3a8d24';
    }    
});