JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div id="loader"><div id="loader-inner"></div></div>

CSS

#loader {
    height: 25px;
    width: 180px;
    box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.15);
    margin: 100px auto;
    position: relative;
    border-bottom: 1px solid #eee;
}

#loader-inner {
    position: absolute;
    height: 25px;
    width: 0px;
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
    background-color: rgba(0, 0, 0, 0.5);
}

JavaScript

count = 0;
setInterval(function(){
    $('#loader-inner').css('width', ((count++) * 10) % 180);
}, 500);