JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="col-md-3" id="1">
                <div class="my-progress-container">
                    <div class="my-progress">
                        <span class="my-progress-value">0</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3" id="2">
                <div class="my-progress-container">
                    <div class="my-progress">
                        <span class="my-progress-value">49</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3" id="3">
                <div class="my-progress-container">
                    <div class="my-progress">
                        <span class="my-progress-value">100</span>
                    </div>
                </div>
            </div>

CSS

.my-progress-value {
            background-color: deepskyblue;
            color: white;
            border-radius: 100%;
            font-size: 7pt;
            padding: 8px 5px 8px 5px;
            position: absolute;
            margin-top: -11px;
        }

        .my-progress-container {
            width: 200px;
            padding-top: 4px;
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .my-progress {
            background-color: deepskyblue;
            width: 60%;
            height: 8px;
            text-align: right;
        }

JavaScript

$(".my-progress-value").each(function () {     // loop thru all .gains
                var progress = $(this).text();
                $(this).parent().css("width", progress + "%");
                if (progress < 30) {
                    $(this).parent().css("background", "lightgrey");

                } else if (progress < 50) {
                    $(this).parent().css("background", "red");
                } else {
                    $(this).parent().css("background", "green");

                }
                $(this).html(progress + "%");
            });