JSFiddle - React, Tailwind, and code Playground

by jhogervorst

HTML

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

<br><br>

<div class="half">
    <div class="bar">Half bar</div>
</div>

<br><br>

<div class="half full">
    <div class="bar">Half bar, full width</div>
</div>

CSS

body {
    padding: 20px;
}

.bar {
    width: 100%;
    height: 40px;
    
    background: -webkit-linear-gradient(left, red, yellow) repeat;
    -webkit-background-size: 50% 100%;
    -webkit-animation-name: masked-animation;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

.half {
    width: 50%;
    overflow-x: hidden;
}

.half.full {
    width: 100%;
}

.half .bar {
    width: 200%;
}

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