JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE>
<html>
    <head>
        <title>Gmail like loader</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script>
            function callMe(inc)
            {
                inc = inc || 10
                var w = parseInt((parseInt($("#inner").css("width"))/parseInt($("#inner").parent().css("width")))*1000)+ inc;
                $("#inner").width(w+"%");
                if(w>100)$("#inner").width(0);
            }
            
            $(document).ready(function(){
                var id = setInterval(callMe,1000);
            });
            
        </script>
    </head>
    <body>
        loading...
        <div id="outer" style="border:1px solid;width:200px;height:10px;overflow:hidden;">
            <div id="inner" style="background-color:#0F67A1;height:100%;width:0%;"/>
        </div>
    </body>
</html>