JSFiddle - React, Tailwind, and code Playground

HTML

<div class="loader">
    <div class="bar"></div>
</div>

CSS

@keyframes loader-animation {
     0% {
         left: -100%;
     }
     49% {
         left: 100%;
     }
     50% {
         left: 100%;
     }
     100% {
         left: -100%;
     }
 }
 .loader {
     height: 5px;
     width: 100%;
     overflow: hidden;
 }
 .loader .bar {
     position: relative;
     height: 5px;
     width: 100%;
     background-color: dodgerblue;
     animation-name: loader-animation;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
 }