JSFiddle - React, Tailwind, and code Playground

by denislexic

HTML

<br />
<br />
<div class="loader_bar">
           <div></div>
        </div>

CSS

.loader_bar{ display: block; width: 300px; border: 1px solid #989898; background: white; padding: 1px;
                -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
            .loader_bar div{ display: block; height: 4px; width: 20%; background: #989898;
                -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }

JavaScript

$(document).ready(function() {

    setTimeout(function() {
        var current_width = parseFloat($('.loader_bar div').css('width'));
        var max_width = parseFloat($('.loader_bar').css('width'));
        var next_width = current_width / max_width * 100 + 1;
        if (next_width <= 100) {
            $('.loader_bar div').css('width', next_width + '%');
            setTimeout(arguments.callee, 10);
        }

    }, 100);
});