JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://tympanus.net/Development/CreativeLoadingEffects/css/component.css">
<script src="http://tympanus.net/Development/CreativeLoadingEffects/js/classie.js"></script>
		<div class="la-anim-1"></div>
		<div class="la-anim-2"></div>
		<div class="la-anim-3"></div>
		<div class="la-anim-4"></div>
		<div class="la-anim-5"></div>
		<div class="la-anim-6">
			<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" viewbox="0 0 500 500">
			  <path id="la-anim-6-border" transform="translate(250, 250)"/>
			  <path id="la-anim-6-loader" transform="translate(250, 250) scale(0.9)"/>
			</svg>
		</div>
		<div class="la-anim-7"></div>
		<div class="la-anim-8"><div></div><div></div></div>
		<div class="la-anim-9"><div></div><div></div><div></div><div></div></div>
		<div class="la-anim-10"></div>
		<div class="la-anim-11"></div>
		<div class="la-anim-13"></div>
		<!-- main container -->
		<div class="container">
			<header>
				<h1 class="la-anim-12" data-content="Creative Loading Effects">Creative Loading Effects</h1>
				<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/TripleViewLayout/"><span>Previous Demo</span></a>
				<a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=16459"><span>Back to the Codrops Article</span></a>
			</header>
			<div class="main">
				<div id="la-buttons" class="column">
					<button class="la-anim-1" data-anim="la-anim-1">YouTube</button>
					<button data-anim="la-anim-2">Fill from left</button>
					<button data-anim="la-anim-3">Fill from down</button>
					<button data-anim="la-anim-4">Expanding box</button>
					<button data-anim="la-anim-5">3D Bar Bottom</button>
					<button data-anim="la-anim-6">Pie Timer</button>
					<button data-anim="la-anim-7">Centered Expanding Line</button>
					<button data-anim="la-anim-8">Fill Sides</button>
					<button data-anim="la-anim-9">Surrounding Borders</button>
					<button...

JavaScript

var loader = document.getElementById('la-anim-6-loader')
				, border = document.getElementById('la-anim-6-border')
				, α = 0
				, π = Math.PI
				, t = 15
				
				, tdraw;

			function PieDraw() {
				α++;
				α %= 360;
				var r = ( α * π / 180 )
				, x = Math.sin( r ) * 250
				, y = Math.cos( r ) * - 250
				, mid = ( α > 180 ) ? 1 : 0
				, anim = 'M 0 0 v -250 A 250 250 1 ' 
				       + mid + ' 1 ' 
				       +  x  + ' ' 
				       +  y  + ' z';

				loader.setAttribute( 'd', anim );
				border.setAttribute( 'd', anim );
				if( α != 0 )
				tdraw = setTimeout(PieDraw, t); // Redraw
			}

			function PieReset() {
				clearTimeout(tdraw);
				var anim = 'M 0 0 v -250 A 250 250 1 0 1 0 -250 z';
				loader.setAttribute( 'd', anim );
				border.setAttribute( 'd', anim );
			}

			var inProgress = false;

			Array.prototype.slice.call( document.querySelectorAll( '#la-buttons > button' ) ).forEach( function( el, i ) {
				var anim = el.getAttribute( 'data-anim' ),
					animEl = document.querySelector( '.' + anim );

				el.addEventListener( 'click', function() {
					if( inProgress ) return false;
					inProgress = true;
					classie.add( animEl, 'la-animate' );

					if( anim === 'la-anim-6' ) {
						PieDraw();
					}

					setTimeout( function() {
						classie.remove( animEl, 'la-animate' );
						
						if( anim === 'la-anim-6' ) {
							PieReset();
						}
						
						inProgress = false;
					}, 6000 );
				} );
			} );

$(document).ready(function(){
    $(".la-anim-1").trigger('click');
});