JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bar" class="loading"></div>
<br />
<button id="start">Start Loading</button>
<button id="stop">Stop Loading</button>

CSS

#bar {
	position: absolute;
	top: 0px;	
	left: 0px;
	background-color: navy;
	height: 8px;
	width:100%;
	animation-fill-mode: forwards;
}

#bar.loading {
	animation-timing-function:linear;
	-webkit-animation-timing-function:linear;
	animation:load-frames 3s infinite;
	-webkit-animation:load-frames 3s infinite; /* Safari and Chrome */
    	animation-fill-mode: forwards;
}


@keyframes load-frames
{
	0%   {left:0%;   right:0%;}
	50%  {left:100%; right:0%;}
	51%  {left:0%; 	 width:0%;}
	100% {left:0%; 	 width:100%;}
}

@-webkit-keyframes load-frames /* Safari and Chrome */
{
	0%   {left:0%;   right:0%;}
	50%  {left:100%; right:0%;}
	51%  {left:0%;	 width:0%;}
	150% {left:0%; 	 width:100%;}
}

#bar.loading {
/*	left: 100%;
	right: 0px;
	width: 0%;
	transition-duration:2s; */
	animation-timing-function:linear;
	-webkit-animation-timing-function:linear;
	animation:load-frames 3s infinite;
	-webkit-animation:load-frames 3s infinite; /* Safari and Chrome */
	animation-fill-mode: backwards;
}

JavaScript

$('#stop').click(function(){
    $('#bar').on('webkitAnimationIteration', function(e){
        $('#bar').removeClass('loading').off('webkitAnimationIteration');
    });
});

$('#start').click(function(){
    $('#bar').addClass('loading');
});