JSFiddle - React, Tailwind, and code Playground

HTML

<div class="loading-icon-outer">
	<div class="loading-icon">
		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20px" height="20px" viewBox="0 0 20 20" style="enable-background:new 0 0 50 50;" xml:space="preserve">
			<rect x="0" y="8" width="4" height="4" fill="#333" opacity="0.2">
			</rect>
			<rect x="8" y="8" width="4" height="4" fill="#333"  opacity="0.2">
			</rect>
			<rect x="16" y="8" width="4" height="4" fill="#333"  opacity="0.2">
			</rect>
		</svg>
	</div>
</div>

JavaScript

var rects = document.getElementsByTagName("rect");
rects[0].animate([
    { "opacity": 0.2, "height": 4, "y": 8 },
    { "opacity": 1, "height": 20, "y": 0 },
    { "opacity": 0.2, "height": 4, "y":8 }], 
    {
      duration: 600,
      fill: "both",
      iterations: Infinity
    });

rects[1].animate([
    { "opacity": 0.2, "height": 4, "y": 8 },
    { "opacity": 1, "height": 20, "y": 0 },
    { "opacity": 0.2, "height": 4, "y":8 }], 
    {
      delay: 150,
      duration: 600,
      fill: "both",
      iterations: Infinity
    });

rects[2].animate([
    { "opacity": 0.2, "height": 4, "y": 8 },
    { "opacity": 1, "height": 20, "y": 0 },
    { "opacity": 0.2, "height": 4, "y":8 }], 
    {
      delay: 150,
      duration: 600,
      fill: "both",
      iterations: Infinity
    });