JSFiddle - React, Tailwind, and code Playground

by Graham Fairweather

HTML

<div id="chartDiv"></div>

CSS

#pwidget {
    background-color:lightgray;
    width:254px;
    padding:2px;
    -moz-border-radius:3px;
    border-radius:3px;
    text-align:left;
    border:1px solid gray;
}
#progressbar {
    width:250px;
    padding:1px;
    background-color:white;
    border:1px solid black;
    height:28px;
}
#indicator {
    width:0px;
    background-image:url("http://img827.imageshack.us/img827/269/shadedgreen.png");
    height:28px;
    margin:0;
}
#loading {
    text-align:center;
    width:250px;
}

JavaScript

var pwidget = {
    maxprogress: 250,
    actualprogress: 0,
    itv: 0,
    delay: 10,
    prog: function () {
        if (pwidget.actualprogress >= pwidget.maxprogress) {
            clearInterval(pwidget.itv);
            return;
        }

        var indicator = document.getElementById("indicator");

        pwidget.actualprogress += 1;
        indicator.style.width = pwidget.actualprogress + "px";

        if (pwidget.actualprogress === pwidget.maxprogress) {
            pwidget.restart();
        }
    },
    start: function () {
        pwidget.itv = setInterval(pwidget.prog, pwidget.delay);
    },
    stop: function () {
        clearInterval(pwidget.itv);
    },
    restart: function () {
        pwidget.actualprogress = 0;
        pwidget.stop();
        pwidget.start();
    },
    element: function () {
        var pwidget = document.createElement("div"),
            progressbar = document.createElement("div"),
            indicator = document.createElement("div"),
            loading = document.createElement("div");

        pwidget.id = "pwidget";
        progressbar.id = "progressbar";
        indicator.id = "indicator";
        loading.id = "loading";
        loading.textContent = "Loading ...";

        progressbar.appendChild(indicator);
        pwidget.appendChild(progressbar);
        pwidget.appendChild(loading);

        return pwidget;
    }
};

var chartDiv = document.getElementById("chartDiv");
var widget = pwidget.element();
var newImg = document.createElement("img");

function placeLoaded() {
    pwidget.stop();
    chartDiv.removeChild(widget);
    chartDiv.appendChild(newImg);
}

function getNew() {
    newImg.addEventListener("load", placeLoaded, false);
    newImg.src = "http://i1276.photobucket.com/albums/y462/staffpicks/Animated_GIFs/ahhhh.gif";
}

chartDiv.appendChild(widget);
pwidget.start();
setTimeout(getNew, 10000);