JSFiddle - React, Tailwind, and code Playground

by guest271314

HTML

<progress min="0" max="10000"></progress>
<output for="progress"></output>
<output for="progress"></output>
<br />
<table id="results"></table>

JavaScript

var arr = $.map(new Array(10000), function (v, k) {
    return v === undefined ? {
        value: k
    } : null
});

var len = arr.length
    , start = 0
    , outputs = $("output[for=progress]")
    , progress = $("progress")
    , results = $("#results")
    , spinner = $("<img />", {
    "src": "data:image/gif;charset=binary;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
});
var request = function () {
    progress.prop("max", len);
    s = setInterval(function () {
        progress.prop("value", ++start);
        outputs.eq(0)
            .text("uploading file...")
    }, 1)
    return $.post("/echo/json/", {
        json: JSON.stringify(arr)
    })
        .then(function (data) {
        clearInterval(s)
        s = null;
        progress.prop("value", len);
        outputs.eq(0)
            .html("upload complete ! <br />processing response, please wait...")
        .next(outputs.eq(1))
        .html(spinner);
        return data
    })
};

request()
.then(function (data) {
    var process = function() {
    var dfd = new $.Deferred();
    t = setTimeout(function () {
        data.forEach(function (res) {
     ...