JSFiddle - React, Tailwind, and code Playground

by paulftw

HTML

<div class=outer>x
</div>

SCSS

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

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

.outer {
  margin: 50px;
  border: 5px solid #afb;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  
  height: $S;
  width: $S;
  border-radius: $S / 2;
  // transform: rotate(45deg);
  position: relative;
  
  &::after {
    content: "";
    position: absolute;
    height: $S;
    width: $S;
    left: 0;
    top: 0;
    border-radius: $S/2;
    border: 5px solid #b2b;

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