JSFiddle - React, Tailwind, and code Playground

review application svg

by Travis Almand

HTML

<?xml version="1.0" encoding="UTF-8"?>
<svg width="104px" height="105px" viewBox="0 0 104 105" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
    <title>Review_Application_v2</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M13.7649399,88.0715347 L13.7649399,13.0574241 C13.7649399,10.3163882 16.0131883,8.09433962 18.7865431,8.09433962 L55.946407,8.09433962 C58.7197619,8.09433962 60.9680103,10.3163882 60.9680103,13.0574241 L60.9680103,88.0715347 L13.7649399,88.0715347 Z" id="path-1"></path>
    </defs>
    <g id="Tour-step-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-108.000000, -128.000000)">
        <g id="Review_Application_v2" transform="translate(109.000000, 129.000000)">
            <path d="M9.94525664,20.7370467 C3.69479868,29.2023051 0,39.6696693 0,51 C0,79.1665222 22.8334778,102 51,102 C79.1665222,102 102,79.1665222 102,51 C102,22.8334778 79.1665222,0 51,0 C39.3536834,0 28.6191382,3.90375713 20.033493,10.4741427 M16.5278637,13.414073 C15.1574246,14.6716503 13.8559644,16.003202 12.6298106,17.4024005" id="outer-circle" stroke="#333333" stroke-width="2" stroke-linecap="round"></path>
            <path d="M40.0222035,5.28895875 C19.3601245,10.2329766 4,28.8227137 4,51 C4,76.9573832 25.0426168,98 51,98 C76.9573832,98 98,76.9573832 98,51 C98,26.5619956 79.3486872,6.48023866 55.5043854,4.21305306 M51,4 C48.757798,4 46.5522676,4.15701003 44.3938037,4.46063526" id="inner-circle" stroke="#333333" stroke-linecap="round"></path>
            <g id="Group-12" transform="translate(14.000000, 15.000000)">
                <polygon id="Path-6" fill="#B2D1F8" points="14.8865074 36.9090899 2 47.0483464 14.8865074 60.2734547"></polygon>
                <polygon id="Path-6-Copy" fill="#B2D1F8" points="60 37.2614995 73 47 60 60"></polygon>
                <rect id="sparkle-top-line"...

SCSS

body.animate {
  #outer-circle {
    animation: 6s rotateCircles linear infinite;
    transform-origin: 51px 51px;
  }
  #inner-circle {
    animation: 6s rotateCircles linear infinite;
    animation-direction: reverse;
    transform-origin: 51px 51px;
  }
  
  #paper-container {
    animation: 2s animatePaper;
  }

  #Checkmark,
  #Heading-line-1,
  #Heading-line-2 {
    animation: 2s fadeContent 2s backwards;
  }

  #sparkle-top-line {
    animation: 2s fadeContent 2.25s backwards;
  }
  #sparkle-middle-line {
    animation: 2s fadeContent 2.5s backwards;
  }
  #sparkle-bottom-line {
    animation: 2s fadeContent 2.75s backwards;
  }
}

@keyframes rotateCircles {
  from { transform: rotate3d(0, 0, 1, 0deg); }
  to { transform: rotate3d(0, 0, 1, 360deg); }
}

@keyframes animatePaper {
  from {
    transform: translate3d(0, 30px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeContent {
  from { opacity: 0; }
  to { opacity: 1; }
}

JavaScript

document.querySelector('button').addEventListener('click', function () {
	var $this = this;
  
	$this.disabled = true;
	document.body.classList.toggle('animate');
  window.setTimeout(function () {
  	$this.disabled = false;
  	document.body.classList.toggle('animate');
  }, 4000);
});