JSFiddle - React, Tailwind, and code Playground

Numbars

by Jennifer Perrin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="wrapper">
    <span id="numbars-task1" class="numbars nu-green" data-max="100">0</span>
    <input type="hidden" id="task1" value="95" />
    <br /><br />
    <span id="numbars-task2" class="numbars nu-red" data-max="100">0</span>
    <input type="hidden" id="task2" value="70" />
    <br /><br />
    <span id="numbars-task3" class="numbars nu-blue" data-max="100">0</span>
    <input type="hidden" id="task3" value="50" />
    <br /><br />
    <span id="numbars-task4" class="numbars nu-darkgreener" data-max="100">0</span>
    <input type="hidden" id="task4" value="25" />
    <br /><br />
    <span id="numbars-task5" class="numbars nu-lightgreener" data-max="100">0</span>
    <input type="hidden" id="task5" value="31" />
    <br /><br />
    <span id="numbars-task6" class="numbars nu-purple" data-max="100">0</span>
    <input type="hidden" id="task6" value="68" />
    <br /><br />
    <span id="numbars-task7" class="numbars nu-lightorange" data-max="100">0</span>
    <input type="hidden" id="task7" value="45" />
    <br /><br />
    <span id="numbars-task8" class="numbars nu-gamebar" data-max="100">0</span>
    <input type="hidden" id="task8" value="70" />
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
    margin: 5% 5%;
    font-family:'Open Sans', sans-serif;
    font-weight: 300;
}
.wrapper { padding: 0 0 10px 0; }

.numbars {
    visibility:hidden;
    width:100%;
    height:5px;
    line-height:5px;
    display:inline-block;
    position:relative
}
.numbars-progress {
    display:block;
    height:100%;
    width:10%;
    position:relative;
    overflow:visible
}
.numbars-num {
    position:absolute;
    display:inline-block;
    left:5px;
    top:-1px;
}

.numbars.nu-green {
    background-color:#F5F1EC
}
    .numbars.nu-green .numbars-progress {
        background-color:rgba(137, 184, 76, .8)
    }
    .numbars.nu-green .numbars-num {
        height:20px;
        line-height:20px;
        font-size:13px;
        padding:0 5px;
        top:-20px;
        left:0;
        color:#fff;
        background-color:rgba(137, 184, 76, .8);
    }

.numbars.nu-red {
    background-color:#F5F1EC
}
    .numbars.nu-red .numbars-progress {
        background-color:rgba(204, 0, 0, .7)
    }
    .numbars.nu-red .numbars-num {
        height:20px;
        line-height:20px;
        font-size:13px;
        padding:0 5px;
        top:-20px;
        left:0;
        color:#fff;
        background-color:rgba(204, 0, 0, .7);
    }

.numbars.nu-blue {
    background-color:#F5F1EC
}
    .numbars.nu-blue .numbars-progress {
        background-color:rgba(42, 184, 232, .7)
    }
    .numbars.nu-blue .numbars-num {
        height:20px;
        line-height:20px;
        font-size:13px;
        padding:0 5px;
        top:-20px;
        left:0;
        color:#fff;
        background-color:rgba(42, 184, 232, .7);
    }

.numbars.nu-darkgreener {
    background-color:#FEFDFA;
    height:24px
}
    .numbars.nu-darkgreener .numbars-progress {
        background:#f1d000;
        background:-moz-linear-gradient(left, #f1d000 0, #89c56d 100%);
        background:-webkit-gradient(linear, left top, right top, color-stop(0%,...

JavaScript

window.Numbars = function (e, t) {
    t = t || 0;
    this.element = e;
    if (!this.element.classList.contains("numbars")) this.element.classList.add("numbars");
    this.getData = function (e, t) {
        if (typeof this.element.attributes[e] == "undefined") {
            return this.element.getAttribute(e) || t
        } else {
            return this.element.attributes[e].nodeValue || t
        }
    };
    this.getCurrentNum = function () {
        if (this.element.firstChild.firstChild.innerText) {
            return parseInt(this.element.firstChild.firstChild.innerText)
        } else if (this.element.firstChild.firstChild.textContent) {
            return parseInt(this.element.firstChild.firstChild.textContent)
        }
        return 0
    };
    this.setCurrentNum = function (e) {
        if (this.element.firstChild.firstChild.innerText) {
            this.element.firstChild.firstChild.innerText = e
        } else {
            this.element.firstChild.firstChild.textContent = e
        }
    };
    this._set = function (e) {
        var t = this,
            n, r;
        r = t.getCurrentNum();
        if (e > r) {
            r += t.increment;
            if (r > t.max) r = t.max
        } else if (e < r) {
            r -= t.increment;
            if (r < 0) r = 0
        } else {
            this.isWorking = false
        }
        t.setCurrentNum(r);
        t.lastNum = r;
        n = r / t.max * 100;
        t.element.firstChild.style.width = n + "%";
        clearTimeout(t.timer);
        t.timer = setTimeout(function () {
            t._set(e)
        }, 1);
        return this
    };
    this.forceSet = function (e) {
        if (this.element.firstChild.firstChild.innerText) {
            this.element.firstChild.firstChild.innerText = e
        } else {
            this.element.firstChild.firstChild.textContent = e
        }
        var t = e / this.max * 100;
        this.element.firstChild.style.width = t + "%"
    };
    this.set =...