JSFiddle - React, Tailwind, and code Playground

NumBars for Tasked

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">
<span id="numbars-task6" class="numbars nu-line" data-max="100" data-label="56">0</span>
<input type="hidden" id="task6" value="56" />
<br /><br /><br />
<span id="numbars-task7" class="numbars nu-boxed" data-max="100" data-label="90">0</span>
<input type="hidden" id="task7" value="90" />

CSS

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

.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-line {
    background-color:#F5F1EC;
    height:12px
}
    .numbars.nu-line .numbars-progress {
        background:#6cc;
        background:-moz-linear-gradient(left, #6cc 0, #639 99%);
        background:-webkit-gradient(linear, left top, right top, color-stop(0%, #6cc), color-stop(99%, #639));
        background:-webkit-linear-gradient(left, #6cc 0, #639 99%);
        background:-o-linear-gradient(left, #6cc 0, #639 99%);
        background:-ms-linear-gradient(left, #6cc 0, #639 99%);
        background:linear-gradient(to right, #6cc 0, #639 99%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cccc', endColorstr='#663399', GradientType=1)
    }
    .numbars.nu-line .numbars-num {
        height:12px;
        line-height:12px;
        font-size:14px;
        padding:0 10px;
        position:absolute;
        top:-20px;
        right:0;
        left:auto;
        color:#444;
        text-shadow:none
    }
    .numbars.nu-line .numbars-num:after {
        width:1px;
        height:30px;
        top:0;
        position:absolute;
        right:0;
        border-right:1px solid #444;
        content:""
    }

.numbars.nu-boxed {
    background-color:#B5B6B5;
    height:4px;
    border:0
}
    .numbars.nu-boxed .numbars-progress {
        background:#EA5424
    }
    .numbars.nu-boxed .numbars-num {
        height:20px;
        line-height:20px;
        font-size:14px;
       ...

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 =...