JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<div class="loader"></div>

SCSS

$size: 200px;

@keyframes load {
  from {top: 100%;}
  to {top: 0;}
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: $size;
  height: $size;
  margin: -$size/2 0 0 -$size/2;
  border-radius: 50%;
  background: #ccc;
  overflow: hidden;
  
  &:before {
    content: '';
    position:absolute;
    width: inherit;
    height: inherit;
    background: steelblue;
    animation: load 5s linear infinite;
  }
}