JSFiddle - React, Tailwind, and code Playground

by Soul_Master

HTML

<div id="divLoadingContainer">
    <div class="indicator"></div>
</div>

<div class="button">
    <button id="bttStart">Start</button>
    <button id="bttStop">Stop</button>
</div>

CSS

#divLoadingContainer
{
    position:absolute;
    top:6px;
    left:6px;
    right:6px;
    width:auto;
    height:5px;
    overflow:hidden;
}
#divLoadingContainer .indicator
{
    width:5%;
    height:100%;
    min-width:30px;
    background: Green;
}
div.button
{
    margin-top:50px;
    border: 1px solid #c1c1c1;
    padding:5px 10px;
    background:#f1f1f1;
}

JavaScript

var indicator = $('#divLoadingContainer .indicator');

function displayPageLoading()
{
    indicator
        .css({ display: 'block', marginLeft: '-5%', width: '5%', opacity: 0 })
        .animate({ opacity: 1, marginLeft: '5%' }, 500)
        .animate({ marginLeft: '90%' }, 4000)
        .animate({ opacity: 0, marginLeft: '100%' }, 500, 'linear', displayPageLoading);
}

function stopPageLoading()
{
    indicator.stop(true, false).animate
    (
        {
            opacity: 0,
            marginLeft: '0%',
            width: '100%'
        },
        500,
        'linear',
        function ()
        {
            indicator.css('display', 'none');
        }
    );
}

$('#bttStart').click(function()
{  
   displayPageLoading(); 
});

$('#bttStop').click(function()
{  
   stopPageLoading(); 
});