JSFiddle - React, Tailwind, and code Playground

by paulftw

HTML

<div class=outer>
  <div class='mask'></div>
</div>

SCSS

$S: 200px;
$bg: #ccc;

body, html {
  background-color: $bg;
}

.outer {
  margin: 50px;
  border: 5px solid #afb;
  border-right-color: transparent;
  &.c2 {
    border-right-color: #afb;    
  }
  border-bottom-color: transparent;
  &.c3 {
    border-bottom-color: #afb;    
  }
  border-left-color: transparent;
  &.c4 {
    border-left-color: #afb;    
  }
  
  height: $S;
  width: $S;
  border-radius: $S;
  transform: rotate(45deg);
  position: relative;
  
  .mask {
    position: absolute;
    height: $S;
    width: $S;
    left: -5px;
    top: -5px;
    border-radius: $S;
    border: 5px solid $bg;

    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    transform: rotate(45deg);
    
    transition: all 0.05s;
  }
}

.outer .mask {
  transform: rotate(45deg);
}

JavaScript

var x = 0;

setInterval(function() {
	$('.outer .mask').css('transform', 'rotate('+x+'deg)')
  x++
  if (x>90) {
    $('.outer').addClass('c2')
  }
  if (x>180) {
    $('.outer').addClass('c3')
  }
  if (x>270) {
    $('.outer').addClass('c4')
  }


}, 100)