JSFiddle - React, Tailwind, and code Playground

HTML

<div class="has-spinner"></div>

<!-- ignore this -->
<footer>
    <p><a href="http://erikwoods.com" target="_blank">Fiddle by Erik Woods</a> | <a href="http://jsfiddle.net/user/erikwoods/fiddles/" target="_blank">Other Fiddles by Erik Woods</a></p>
</footer>

SCSS

$spinner-width: 16px; // this will be relative to whatever the size of your headline is on the modal/interstitial

body {
    background: #2081bf;
}

.has-spinner {
    -webkit-animation: spinning_semi_circle 1s 0s linear infinite;
    animation: spinning_semi_circle 1s 0s linear infinite;
    background: transparent;
    border: 4px solid #fff;
    border-bottom-color: transparent;
    border-radius: 100%;
    display: block;
    height: $spinner-width;
    width: $spinner-width;
}

@-webkit-keyframes spinning_semi_circle {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spinning_semi_circle {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

// ignore this
footer{
    background: #ff0;
    border: 0 none;
    border-top: 1px solid #000;
    bottom: 0;
    color: #000;
    padding: 10px;
    position: fixed;
    width: 100%;
}

JavaScript

// QL spinner animation