JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="loading-animation">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="125px" height="125px" viewBox="0 0 125 125" enable-background="new 0 0 125 125" xml:space="preserve">
    <path class="body" stroke-miterlimit="10" d="M64.778,28.998C95.827,28.998,121,58.11,121,94.022c0,5.789-2.455-0.639-10.692-0.639c-52.571,0-95.187-26.127-95.187-58.356c0-6.993,5.747-12.665,12.666-12.665c4.958,0,5.468,2.133,8.609,2.133c2.629,0,4.762-2.133,4.762-4.766c0-2.628-2.133-4.762-4.762-4.762C30.619,14.968,1,15.253,1,13.449c0-1.732,22.498-6.296,25.287-6.296C27.193,6.241,32.412,1,40.45,1c8.415,0,15.239,6.823,15.239,15.24c0,12.281-11.196,16.491-21.742,16.491c-2.699,0-4.869,2.179-4.869,4.866c0,2.684,2.17,4.855,4.869,4.855C41.359,42.452,45.093,28.998,64.778,28.998z"></path>
    <path class="wing" stroke-miterlimit="10" d="M110.308,93.384c-38.187,0-69.141-19.122-69.141-42.711"></path>
    <ellipse class="knee" stroke-miterlimit="10" cx="65.491" cy="97.173" rx="3.963" ry="3.787"></ellipse>
    <line class="lower-leg" stroke-miterlimit="10" x1="65.49" y1="100.96" x2="65.49" y2="120.114"></line>
    <line class="upper-leg" stroke-miterlimit="10" x1="65.49" y1="86.547" x2="65.49" y2="93.384"></line>
    <line class="feet" stroke-linecap="round" stroke-miterlimit="10" x1="56.857" y1="120.114" x2="74.276" y2="120.114"></line>
  </svg>
</div>

SCSS

.loading-animation{
	&{
		position: fixed;
		top: 50%;
		left: 50%;
		z-index: 1000;
		transform: translate(-50%,-50%);
	}
	svg{
		width: 80%;
		height: 80%;
        fill: none;
        stroke: blue;
		stroke-width: 2;
	}
	.two{
		stroke-dasharray: 1000;
		stroke-dashoffset: 0;
	}
}
.red{
    stroke: red !important;
}
}

JavaScript

var loadingAnimation = $(".loading-animation"),
    bird = loadingAnimation.find(".bird"),
    birdBody = loadingAnimation.find(".body")[0].getTotalLength(),
    birdOther;

console.log(birdBody)