JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div class="spinner-container">
    <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
		<circle fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30" />
	</svg>
    <div class="ie-spinner"></div>
</div>

SCSS

@mixin ie {

	
		@content;
}

$gray-1: #f3f3f4;
$meridian-orange: #efb22d;
$spinner-offset: 187;
$spinner-duration: 1.4s;

.spinner-container {
    display: inline-block;
	
	.ie-spinner {
		width: 400px;
		height: 400px;
	}
}

svg.spinner {
    animation: rotator $spinner-duration linear infinite;
    width: 65px;
    height: 65px;
	
    @include ie {
        display: none;
    }
	
    >circle {
        stroke-dasharray: $spinner-offset;
        stroke-dashoffset: 0;
        transform-origin: center;
        animation: dash $spinner-duration ease-in-out infinite, colors ($spinner-duration * 4) ease-in-out infinite;
    }
}

div.ie-spinner {
    display: none;
	
    @include ie {
        $size: 7px;
        display: block;
        border: $size solid $gray-1;
        border-top: $size solid $meridian-orange;
        border-radius: 50%;
        width: 65px;
        height: 65px;
        animation: ie-spin 750ms cubic-bezier(0.7, 0.3, 0.3, 0.7) infinite;
    }
}

@keyframes ie-spin {
    0% {
        transform: rotateZ(0);
    }
    100% {
        transform: rotateZ(360deg);
    }
}

@keyframes rotator {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(270deg);
    }
}

@keyframes colors {
    0% {
        stroke: #4285F4;
    }
    25% {
        stroke: #DE3E35;
    }
    50% {
        stroke: #F7C223;
    }
    75% {
        stroke: #1B9A59;
    }
    100% {
        stroke: #4285F4;
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: $spinner-offset;
    }
    50% {
        stroke-dashoffset: $spinner-offset / 4;
        transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: $spinner-offset;
        transform: rotate(450deg);
    }
}