JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="load"><div></div></div>

SCSS

*{
  box-sizing: border-box;
}
.load{
  $d: 30px;
  &{
    position: relative;
    display: block;
    height: $d;
    width: $d;
    margin: 0;
  }
  > div{
    position: absolute;
    top: 0;
    left: 0;
    height: $d;
    width: $d;
    border: 4px solid #333;
    border-radius: $d/2;
  }
  %half{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: $d;
    width: $d/2;
    background: #ccc;
  }
  &:before{
    content: "";
    display: block;
    height: $d;
    width: $d/2;
    background: #ccc;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 100%;
  }
}