JSFiddle - React, Tailwind, and code Playground

HTML

<p>Half bar, full width, and half speed:</p>
<div class="half full">
    <div class="bar"></div>
</div>

<p>Half bar, full width, and half speed:</p>
<div class="half full">
    <div class="bar"></div>
</div>

CSS

body { padding: 20px; font-family: Helvetica, Arial, sans-serif; }
p { margin: 20px 0 5px; }
p:first-child { margin-top: 0; }

@-webkit-keyframes moving-gradient {
    0% { background-position: left bottom; }
    100% { background-position: right bottom; }
}

.bar {
    width: 400px;
    height: 30px;
    
    background: -webkit-linear-gradient(
        left,
        #b2b2b2 20%,
        #e2e2e2 65%,
        #b2b2b2 100%
    ) repeat;
    
    -webkit-background-size: 20% 100%;
    -webkit-animation-name: moving-gradient;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

.half { width: 200px; overflow-x: hidden; }
.half.full { width: 100px; }
.half .bar { width: 500%; }
.half.full .bar { -webkit-animation-duration: 10s; }