JSFiddle - React, Tailwind, and code Playground

by Matt Felten

HTML

<p><i class="loader"></i> Wow</p>

<h4><i class="loader"></i> Much spin</h4>

<h3><i class="loader"></i> Very CSS</h3>

<h2><i class="loader"></i> So Repsonse</h2>

<h1><i class="loader"></i> Wow</h1>

<p class="massive"><i class="loader"></i> NICE SIZE</p>

CSS

.loader {
    border: .15em solid blue;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    width: .5em;
    height: .5em;
    
    -webkit-animation: spin .75s linear infinite;
    -moz-animation: spin .75s linear infinite;
    -ms-animation: spin .75s linear infinite;
    -o-animation: spin .75s linear infinite;
    animation: spin .75s linear infinite;
}


@-webkit-keyframes spin {
	100% { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
	100% { -moz-transform: rotate(360deg); }
}

@-o-keyframes spin {
	100% { -o-transform: rotate(360deg); }
}

@keyframes spin {
	100% { transform: rotate(360deg); }
}

body {
    font-family: 'Comic Sans', 'Comic Sans MS';
}

.massive {
    font-size: 5em;
    margin: .25em 0;
}