JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<svg class="svg-spinner" height="180" width="180">
    <circle cx="90" cy="90" r="82.5" />
    <path class="arc" d="M90,7.5 a1,1 0 0,0 0,165" />
</svg>
<svg class="svg-spinner medium" height="68" width="68" style="position: absolute; left: 200px">
    <circle cx="34" cy="34" r="29.5" />
    <path class="arc" d="M34,4.5 a1,1 0 0,0 0,59" />
</svg>
<svg class="svg-spinner small" height="16" width="16" style="position: absolute; left: 300px">
    <circle cx="8" cy="8" r="6.5" />
    <path class="arc" d="M8,1.5 a1,1 0 0,0 0,13" />
</svg>

CSS

.spinner {
    display:block;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background-:         image:url(http://www.clipartbest.com/cliparts/9iR/RyK/9iRRyKLie.png);
    background-size:100%;

    -webkit-animation: application-loading-rotate 1s;
    animation: application-loading-rotate 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}
.svg-spinner {
    -webkit-animation: application-loading-rotate 1s;
    animation: application-loading-rotate 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    position: fixed;
}
.svg-spinner > .arc {
    stroke:#CDCDCD; 
    stroke-width:15px;
    fill:rgba(0,0,0,0);
}
.svg-spinner > circle {
    stroke:#666666; 
    stroke-width:15px;
    fill:rgba(0,0,0,0);
}
.svg-spinner.medium > circle, .svg-spinner.medium > .arc {
    stroke-width:9px;
}
.svg-spinner.small > circle, .svg-spinner.small > .arc {
    stroke-width:3px;
}


@-webkit-keyframes application-loading-rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes application-loading-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}