JSFiddle - React, Tailwind, and code Playground

by Glutamat

JavaScript

var ProgressBar = (function () {
    var proto = {}
    proto.setProgress = function (n) {
        this.inner.style.marginLeft = (-100 + (n % 100)) + "%";
    };
    proto.setText = function (str) {
        this.bar.children[1].innerHTML = str;
    }


    return function ProgressBar() {
        var that = Object.create(proto);
        var bar = document.createElement("div");
        var inner = document.createElement("div");
        var text = document.createElement("a");

        text.innerHTML = "Dummy";

        text.style.position = "relative";
        text.style.top = "-16px";
        text.style.left = "10px";
        text.style.color = "#FFF";
        text.style.opacity = 1;

        bar.style.width = "60%";
        bar.style.overflow = "hidden";
        bar.style.backgroundColor = "#A0A0A0";
        bar.style.border = "1px solid silver";
        bar.style.height = "15px";
        bar.style.borderRadius = "8px";

        inner.style.width = "100%";
        inner.style.height = "15px";
        inner.style.borderRadius = "8px";
        inner.style.marginLeft = "100%"
        inner.style.position = "relative";
        inner.style.background = "-webkit-linear-gradient(top, #d2ff52, #91e842 )";


        bar.appendChild(inner);
        bar.appendChild(text);

        that.bar = bar;
        that.inner = inner;
        return that;
    }
})();


var progress = ProgressBar();
document.body.appendChild(progress.bar);

var i = 0;
var progressInt = setInterval(function () {
    progress.setProgress(i);
    progress.setText(i + "%");
    i = (i + 1) % 100;
}, 100);