JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="activity">
	<div></div>
	<div></div>
	<div></div>
</div>

SCSS

.activity {
	font-size: 0;
	
	div {
		verticali-align: bottom;
		height: 20px;
		width: 4px;
		margin: 2px;
		background-color: #000;
		display: inline-block;
		animation: activity 3s infinite;
		transition: transform ease;
		transform-origin: 0 100%;
	}
	:nth-child(2) {
		animation-duration: 3.5s;
		animation-direction: reverse;
	}
	:nth-child(3) {
		animation-delay: -1.25s;
		animation-duration: 2.5s;
	}
}

@keyframes activity {
	0% {
		transform: scaleY(0.25);
	}
	5% {
		transform: scaleY(0.8);
	}
	15% {
		transform: scaleY(0.3);
	}
	25% {
		transform: scaleY(0.9);
	}
	30% {
		transform: scaleY(0.4);
	}
	45% {
		transform: scaleY(0.7);
	}
	50% {
		transform: scaleY(0.25);
	}
	60% {
		transform: scaleY(0.6);
	}
	70% {
		transform: scaleY(0.25);
	}
	75% {
		transform: scaleY(0.8);
	}
	80% {
		transform: scaleY(0.25);
	}
	90% {
		transform: scaleY(1);
	}
	100% {
		transform: scaleY(0.25)
	}
}