JSFiddle - React, Tailwind, and code Playground

by Mark Beharrell

HTML

<div class="ring">
<div class="spin"></div>
</div>

CSS

.spin{
    top: 8px;
    left: 8px;
    width: 30px;
    height: 30px;
    border-top-left-radius: 40px;
    z-index: 10;
    opacity: 0.25;
    animation: spin 1s infinite linear;
    transform-origin: bottom right;
    position: absolute;
    border-top:10px solid #fff;
    border-left:10px solid #fff;
}

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

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

.ring{
    width: 60px;
    height: 60px;
    margin: 0;
    border:10px solid #ac3eff;
    display-inline:block;   
    border-radius:40px; 
}