JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="ver-panel">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Status</th>
                <th>Progress</th>
                <th>Entity</th>
                <th>Warnings</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="status">1</td>
                <td class="">
                    <div class="container">
                        <div class="progress progress-striped active">
                            <div class="bar" style="width: 0%;"></div>
                        </div>
                    </div>
                </td>
                <td>Account 1</td>
                <td></td>
            </tr>
            <tr>
                <td class="status">2</td>
                <td class="">
                    <div class="container">
                        <div class="progress progress-striped active">
                            <div class="bar" style="width: 0%;"></div>
                        </div>
                    </div>
                </td>
                <td>Account 2</td>
                <td></td>
            </tr>
            <tr>
                <td class="status">3</td>
                <td class="">
                    <div class="container">
                        <div class="progress progress-striped active">
                            <div class="bar" style="width: 0%;"></div>
                        </div>
                    </div>
                </td>
                <td>Account 3</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>
<div id="msg-log">
    <img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/25-1.gif" />
    <div class="quotes">Started RG Processing</div>
    <div class="quotes">Request Retrieval Complete</div>
    <div class="quotes">Content Filter Processing Complete</div>
    <div class="quotes">Style Processing Complete</div>
    <div class="quotes">Rulr Processing Complete</div>
...

CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css');
 .ver-panel {
    margin:20px;
}
#msg-log {
}
.quotes {
    display: none;
}
#msg-log img {
    float:left;
    margin-right:10px;
}
#msg-log div {
    padding:5px;
    font-size:16px;
    color:#9A9A9A;
}
.container {
    width: 200px;
}

JavaScript

$('.status').html($('#msg-log'));
(function () {

    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

})();
var progress = setInterval(function () {
    var $bar = $('.bar');

    if ($bar.width() >= 200) {
        clearInterval(progress);
        $('.progress').removeClass('active');
    } else {
        $bar.width($bar.width() + 20);
    }
    $bar.text("Report Name");
}, 800);