JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ModalLoading">
    <div class="inner"></div>
</div>

CSS

div.ModalLoading
{
    height: 40px;
    width: 40px;
    margin: 0 auto 20px;
    overflow: hidden;
    z-index: 1104;
    position: relative;
    background-color: #ccc;
}
div.ModalLoading div
{
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 480px;
    background-color: #000;
}

JavaScript

var loadingFrame = 1; loadingFrame = (loadingFrame + 1) % 12;



function startLoader(loopint,_left,_right)
{
    settings = {};
    if(_left && !_right)
    {
        settings.left = (((loadingFrame + 1) % 12) * -40)
        var _callback = function(){startLoader(loopint,false,true)}
    }else{
        settings.left = (((loadingFrame + 1) % 12) * +40)
        var _callback = function(){startLoader(loopint,true,false)}
    }
            
    jQuery('.inner').animate(settings,loopint,_callback);
}

startLoader(5000);