JSFiddle - React, Tailwind, and code Playground

pending svg

by Travis Almand

HTML

<?xml version="1.0" encoding="UTF-8"?>
<svg width="81px" height="81px" viewBox="0 0 81 81" 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>Pending</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <rect id="path-1" x="12.0504616" y="0" width="12.4391862" height="5.44214396" rx="2.72107198"></rect>
    </defs>
    <g id="Pending" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-126.000000, -115.000000)">
        <g transform="translate(126.000000, 115.000000)">
            <g id="Paper">
                <path d="M1,4 L11.2796053,4 L11.2796053,79.1879699 L4,79.1879699 C2.34314575,79.1879699 1,77.8448242 1,76.1879699 L1,4 Z" id="Rectangle-16" fill="#B2D1F8"></path>
                <path d="M43.2959712,1.5625 L3.71828008,1.5625 C2.52767562,1.5625 1.5625,2.52767562 1.5625,3.71828008 L1.5625,75.9692199 C1.5625,77.1598244 2.52767562,78.125 3.71828008,78.125 L19.6306675,78.125 C20.0621399,78.125 20.4119175,78.4747775 20.4119175,78.90625 C20.4119175,79.3377225 20.0621399,79.6875 19.6306675,79.6875 L3.71828008,79.6875 C1.66473069,79.6875 0,78.0227693 0,75.9692199 L0,3.71828008 C0,1.66473069 1.66473069,0 3.71828008,0 L44.027807,0 L62.0653195,21.645015 L62.0653195,75.9692199 C62.0653195,78.0227693 60.4005889,79.6875 58.3470395,79.6875 L33.5084815,79.6875 C33.0770091,79.6875 32.7272315,79.3377225 32.7272315,78.90625 C32.7272315,78.4747775 33.0770091,78.125 33.5084815,78.125 L58.3470395,78.125 C59.5376439,78.125 60.5028195,77.1598244 60.5028195,75.9692199 L60.5028195,22.2107181 L43.2959712,1.5625 Z M30.7021497,78.125 C31.1336222,78.125 31.4833997,78.4747775 31.4833997,78.90625 C31.4833997,79.3377225 31.1336222,79.6875 30.7021497,79.6875 L22.7563623,79.6875 C22.3248898,79.6875 21.9751123,79.3377225 21.9751123,78.90625 C21.9751123,78.4747775 22.3248898,78.125 22.7563623,78.125...

CSS

#Hour-Hand {
  animation: 6s rotateHands linear infinite;
  transform-origin: 17.9px 24.6px;
}

#Minute-Hand {
  animation: 3s rotateHands linear infinite;
  transform-origin: 18px 25px;
}

#Group-7 {
  animation: 1s animateChecks1 1s backwards;
}

#Group-7-Copy {
  animation: 1s animateChecks2 2s backwards;
}


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

@keyframes animateChecks1 {
  0% {
    opacity: 0;
    transform: scale3d(1,1,1) translate(8px, 12px)
  }
  50% {
    opacity: 1;
    transform: scale3d(1,1,1) translate(8px, 12px)
  }
  75% {
    transform: scale3d(1.5,1.5,1) translate(4px, 6px)
  }
  100% {
    transform: scale3d(1,1,1) translate(8px, 12px)
  }
}
@keyframes animateChecks2 {
  0% {
    opacity: 0;
    transform: scale3d(1,1,1) translate(8px, 27px)
  }
  50% {
    opacity: 1;
    transform: scale3d(1,1,1) translate(8px, 27px)
  }
  75% {
    transform: scale3d(1.5,1.5,1) translate(4px, 16px)
  }
  100% {
    transform: scale3d(1,1,1) translate(8px, 27px)
  }
}