JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

 <span class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></span>

<svg class="blu" viewBox="0 0 1728 1728">
<path d="M1728 864q0 176-68.5 336t-184 275.5t-275.5 184t-336 68.5t-336-68.5t-275.5-184t-184-275.5T0 864q0-213 97-398.5T362 160T736 9v228q-221 45-366.5 221T224 864q0 130 51 248.5t136.5 204t204 136.5t248.5 51t248.5-51t204-136.5t136.5-204t51-248.5q0-230-145.5-406T992 237V9q206 31 374 151t265 305.5t97 398.5z" fill="#0144af"/>
</svg>

CSS

.fa {
  color: #0144af;
}

.blu {
  width: 45px;
  height: 45px;
  margin: 10px;
  -webkit-animation: spinn 2s infinite linear; 
}

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