JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<svg version="1.1" clas="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	 viewBox="0 0 173 200" fill="#341f7c">
		<path class="st1" d="M111.8,60L111.8,60l-7.8,4.5l-11.7,6.7l11.7,6.7l7.8,4.5l19.5,11.2V71.2L111.8,60z"/>
		<path class="st1" d="M84.5,44.2L65.1,55.4l0,0v22.5l11.7-6.7l7.8-4.5l0,0L104,55.4L84.5,44.2z"/>
		<path class="st1" d="M37.8,71.2v22.5l0,0l7.8,4.5l11.7,6.7V60L37.8,71.2z"/>
		<path class="st1" d="M65.2,118.4l-7.8-4.5l-19.5-11.2v22.5l19.5,11.2l0,0l7.8-4.5l11.7-6.7L65.2,118.4z"/>
		<path class="st1" d="M92.3,125.2l-7.8,4.5l-19.4,11.2l19.5,11.2l19.5-11.2l0,0v-22.5L92.3,125.2z"/>
		<path class="st1" d="M123.6,98.2l-11.7-6.7v44.9l19.5-11.2v-22.5l0,0L123.6,98.2z"/>
		<path class="st1" d="M94.4,115l9.8-5.6V86.9L84.6,75.7L65.2,86.9v22.5l19.5,11.2L94.4,115z"/>
</svg>

SCSS

@keyframes fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.st1 {
  fill: red;
}

@for $i from 1 through 6 {
  .st1:nth-child(#{$i}) {
    animation: fade .9s cubic-bezier(0.83, 0, 0.17, 1) infinite;
    animation-delay: #{$i * -150ms};
  }
}

.loader {
 color: #341f7c;
}