JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<div class="loading-container">
  <span class="loading"></span>
</div>

SCSS

body {
  background: #333;
}

$base-line-height: 16px;
$white: rgb(255, 255, 255);
$off-white: rgba($white, 0.2);
$spin-duration: 1s;
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-container {
  display: flex;
}

.loading {
  border-radius: 50%;
  width: $base-line-height;
  height: $base-line-height;
  border: .25rem solid $off-white;
  border-top-color: $white;
  animation: spin $spin-duration infinite linear;
}