JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<div class="cover-loader">
		<div class="loader">
			<div class="row1">
				<div class="left-loader-animation"></div>
				<div class="right-loader-animation"></div>
			</div>
			<div class="row2">
				<div class="left-loader-animation"></div>
				<div class="right-loader-animation"></div>
			</div>
			<div class="row3">
				<div class="left-loader-animation"></div>
				<div class="right-loader-animation"></div>
			</div>
			<div class="row4">
				<div class="left-loader-animation"></div>
				<div class="right-loader-animation"></div>
			</div>
		</div>
		</div>

CSS

.row1 .left-loader-animation, .row1 .right-loader-animation {
  animation-delay:-0s; 
}
.row2 .left-loader-animation, .row2 .right-loader-animation {
  animation-delay:-0.5s;
}
.row3 .left-loader-animation, .row3 .right-loader-animation {
  animation-delay:-1s;
}
.row4 .left-loader-animation, .row4 .right-loader-animation {
  animation-delay:-1.5s;
}
.cover-loader {
	display: flex;
	margin: auto;
    transform: rotate(-90deg);
    position: relative;
    width: 100px;
    height: 100vh;
}
.loader {
position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100px;
    height: 100px;
}
.left-loader-animation, .right-loader-animation {
	height:15px;
  width:100px;
  background-color:#aa9055;
  border-radius:0px;
  position:absolute;
}
.left-loader-animation {
  left:0px;
  animation:left-animation 2s infinite;
}
.right-loader-animation {
  right:0px;
  animation:right-animation 2s infinite;
}
.row1, .row2, .row3, .row4 {
  position: relative;
}
.row1 {
  top:0px;
}
.row2 {
  top:25px;
}
.row3 {
  top:50px;
}
.row4 {
  top:75px;
}

@keyframes left-animation {
  0%, 50%, 100% {
    width: 45px;
  }
  25% {
    width: 80px;
  }
  75% {
    width:10px;
  }
}
@keyframes right-animation {
  0%, 50%, 100% {
    width: 45px;
  }
  25% {
    width: 10px;
  }
  75% {
    width:80px;
  }
}