JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.min.js"></script>
<svg viewBox="0 0 191.12 191.12">
  <g fill-rule="evenodd">
    <path fill="#3266bc" d="M188.25 72.33c12.8 51.03-18.36 103.1-69.47 115.92-50.95 12.8-103.09-18.36-115.9-69.4C-9.92 67.84 21.3 15.68 72.25 2.9c51.11-12.83 103.2 18.41 116 69.44"/>
    <path fill="#fff" d="M95.56 12.18c45.89 0 83.39 37.5 83.39 83.46 0 45.88-37.5 83.3-83.39 83.3-45.87 0-83.38-37.42-83.38-83.3 0-45.96 37.5-83.46 83.39-83.46zm-55.82 38.6l29.91 77.59 10.96-28.34h28.74l10.95 28.34 30.23-78.53a71.9 71.9 0 0 0-18.95-16.13L110.6 91.5H81L59.94 33.47a72.56 72.56 0 0 0-20.2 17.3zm122.85 19.5l-34.06 88.86c22.86-11.98 38.6-35.94 38.6-63.5 0-8.92-1.57-17.46-4.54-25.36zm-48.94 94.65l-.23-1.8-18.48-47.92-18.48 47.92-.08 1.49a70.34 70.34 0 0 0 19.18 2.58c6.27 0 12.3-.78 18.09-2.27zm-52.45-6.57L28 71.84a71.5 71.5 0 0 0 33.2 86.52zM95.56 24c6.27 0 12.45.79 18.33 2.35L95.8 76.38l-18.16-50.1A71.29 71.29 0 0 1 95.56 24"/>
  </g>
</svg>

CSS

html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Segoe UI, sans-serif;
}

svg {
    width: 75vmin;
    animation: spin 800ms steps(5) infinite;
}

@keyframes spin {
    to {
        transform: rotateZ(360deg)
    }
}

aside {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding: 10px;
    background: #222;
    color: #eee;
}

aside input {
    margin: 0 10px;
}

JavaScript

console.clear();

const spinner = { duration: 800, frames: 5 };
const gui = new dat.GUI();
const svgStyle = document.querySelector("svg").style;

gui.add(spinner, "duration", 1, 800).onChange(value => {
	svgStyle.animationDuration = value + "ms";
});

gui.add(spinner, "frames", 2, 100).step(2).onChange(value => {
	svgStyle.animationTimingFunction = `steps(${value})`;
});