JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class=spinner>
  <div class=spinner-inner></div>
  <div class=spinner-mask></div>
  <div class=spinner-mask-two></div>
</div>

CSS

.spinner {
    -webkit-mask-box-image: -webkit-radial-gradient(
          center,ellipse cover, rgba(0,0,0,1) 68%, rgba(0,0,0,0) 69.5%);
    background: #eee;
    width: 200px;
    height: 200px;
    position: relative;
    
    margin: 20px auto;
  }
  
  .spinner-inner {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    border-width: 100px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-top-color: rgba(200,200,200,1);
    -webkit-transform: rotate(-45deg);
    -webkit-animation: inner 15s linear infinite;
  }
  
  .spinner-mask {
    position: absolute;
    top: 1px;
    left: 0px;
    background: transparent;
    border-width: 100px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-top-color: #eee;
    -webkit-transform: rotate(-45deg);
    -webkit-animation: mask 15s linear infinite;
  }
  .spinner-mask:after, .spinner-mask-two {
    display: block;
    content: '';
    opacity: 0;
    position: absolute;
    top: 1px;
    left: 0px;
    background: transparent;
    border-width: 100px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-top-color: rgba(200,200,200,1);
    -webkit-transform: rotate(45deg);
    -webkit-animation: mask-two 15s linear infinite;
  }
  
  @-webkit-keyframes inner {
    0% {
      -webkit-transform: rotate(-45deg);
    }
    25% {border-left-color:transparent;}
    26% {
      border-left-color:  rgba(200,200,200,1);
    }
    50% {border-bottom-color:transparent;}
    51% {
      border-bottom-color:  rgba(200,200,200,1);
    }
    75% {border-right-color:transparent;}
    76% {
      border-right-color:  rgba(200,200,200,1);
    }
    100% {
      -webkit-transform: rotate(315deg);
      border-left-color:  rgba(200,200,200,1);
      border-bottom-color:  rgba(200,200,200,1);
      border-right-color:  rgba(200,200,200,1);
    }
  }
  
   @-webkit-keyframes...