JSFiddle - React, Tailwind, and code Playground

by Owen Hartley

HTML

<div id="test"></div>

CSS

@keyframes bars {
	from { background-position: -32px 0px; }
	to { background-position: 0px 0px; }
}

#test {
	position: relative;
	overflow: hidden;
	width: 700px;
	height: 32px;
	border-radius: 8px;
}

#test::before {
	content: "";
	position: absolute;
	left: -16px;
	top: 0px;
	display: block;
	width: calc( 100% + 32px );
	height: 32px;
	background-image: repeating-linear-gradient( to right, #ff3f3f 0px 16px, #bf3f3f 16px 32px );
	background-size: 32px 32px;
	transform: skew( 45deg );
	animation: bars 1s linear infinite;
}