JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.timezones.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css">
<div id="example" class="k-content">
    <div class="demo-section">
        <button id="analyzeButton" class="k-button">Upload</button>
    </div>
    <div class="demo-section">
        <ul class="poll-results">
            <li>
                 <h4>File Upload Status</h4>
 <span id="progressStatus"></span>

                <div id="testProgBar"></div>
            </li>
        </ul>
    </div>
</div>

CSS

.demo-section {
            width: 400px;
            padding: 30px;
        }
        .demo-section h2 {
            font-weight: normal;
            margin-bottom: 15px;
        }
        .forms {
            list-style-type: none;
            padding: 0;
            margin-bottom: -10px;
        }
        .forms label {
            display: inline-block;
            width: 120px;
            text-align: right;
            padding-right: 18px;
        }
        .forms li {
            margin-bottom: 10px;
        }
        #analyzeButton {
            width: 260px;
            margin: 10px 0 0 138px;
        }
        .poll-results {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .poll-results li:after {
            content:"";
            display: block;
            clear: both;
            height: 3px;
            line-height: 0;
        }
        #example .poll-results h4, .poll-results .k-progressbar {
            margin: 0 0 5px 0;
            width: 400px;
        }

JavaScript

$(document).ready(function () {
            $("#testProgBar").kendoProgressBar({
                value: 0
            });
        });

var smoothCount = 10;
        function printSmooth(percentPortion, bigType, currentFile) {
            
            if (smoothCount !== 0) {
                var timeDelay = (bigType[currentFile] === true) ? 3800 : 2100;

                var microPortion = (percentPortion / 10);
                var currentPortion = $("#testProgBar").data("kendoProgressBar").value();
                $("#testProgBar").data("kendoProgressBar").value(currentPortion + microPortion);

                $('#progressStatus').text("Loading file #" + (currentFile + 1));
                smoothCount = smoothCount - 1;
                setTimeout(function () {
                    printSmooth(percentPortion, bigType, currentFile);
                }, timeDelay);
            } else {
                done = true;
                return done;
            }

        }

        function printPercentAndFile(currentFile, totalFiles, bigType) {
            var percentPortion = (85 / totalFiles);
            debugger;
            //var currentPercent = ((85 / totalFiles) * currentFile);

            //$("#testProgBar").data("kendoProgressBar").value(currentPercent);
            //$('#progressStatus').text("Loading file #" + (currentFile + 1));

            if ((currentFile + 1) <= totalFiles) {
                var smoothDone = printSmooth(percentPortion, bigType, currentFile);
                if (smoothDone === true) {
                    ++currentFile;
                    smoothCount = 10;
                }
                printPercentAndFile(currentFile, totalFiles, bigType);
                //setTimeout(function () {
                //    printPercentAndFile(currentFile, totalFiles);
                //}, 3000);
            }
        }

        $("#analyzeButton").click(function () {
            var currentFile = 0,
                fileCount = 3,
                bigType =...