JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
    <div class="bar bar-1"></div>
    <div class="bar bar-2"></div>
    <div class="bar bar-3"></div>
    <div class="bar bar-4"></div>
</div>

CSS

.slider{
	width:100%;
	height:10px;
	margin-top: 50px;
	overflow: hidden;
    position: relative;
}

.bar {
    height: 100%;
    position: absolute;
}

.bar-1 {
    background: #CCDAE7;
    -webkit-animation: loading 2s infinite linear;
       -moz-animation: loading 2s infinite linear;
        -ms-animation: loading 2s infinite linear;
         -o-animation: loading 2s infinite linear;
            animation: loading 2s infinite linear;
}

.bar-2 {
    background: #4873A8;
    -webkit-animation: loading 2s -0.5s infinite linear;
       -moz-animation: loading 2s -0.5s infinite linear;
        -ms-animation: loading 2s -0.5s infinite linear;
         -o-animation: loading 2s -0.5s infinite linear;
            animation: loading 2s -0.5s infinite linear;
}

.bar-3 {
    background: #9FB9D0;
    -webkit-animation: loading 2s -1s infinite linear;
       -moz-animation: loading 2s -1s infinite linear;
        -ms-animation: loading 2s -1s infinite linear;
         -o-animation: loading 2s -1s infinite linear;
            animation: loading 2s -1s infinite linear;
}

.bar-4 {
    background: #7CA3CC;
    -webkit-animation: loading 2s -1.5s infinite linear;
       -moz-animation: loading 2s -1.5s infinite linear;
        -ms-animation: loading 2s -1.5s infinite linear;
         -o-animation: loading 2s -1.5s infinite linear;
            animation: loading 2s -1.5s infinite linear;
}

@-webkit-keyframes "loading" {
      0% {left:    0; width:   0%;}
     25% {left:    0; width:  14%;}
     50% {left:  14%; width:  29%;}
     75% {left:  43%; width:  57%;}
    100% {left: 100%; width: 100%;}
}

@-moz-keyframes "loading" {
      0% {left:    0; width:   0%;}
     25% {left:    0; width:  14%;}
     50% {left:  14%; width:  29%;}
     75% {left:  43%; width:  57%;}
    100% {left: 100%; width: 100%;}
}

@-ms-keyframes "loading" {
      0% {left:    0; width:   0%;}
     25% {left:    0; width:  14%;}
     50% {left:  14%; width:  29%;}
     75% {left:  43%; width:  57%;}
...