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);