JSFiddle - React, Tailwind, and code Playground

by zapaza10

HTML

<div class="container">
  <div class="spinners"> 
    <div class="spinner-block">
      <div class="spinner spinner-1"></div>
    </div>  
  </div>
</div>

SCSS

//variables
$bg-color: #fff; //container background-color;
$basic-dark-color: #f0b600; //color of the spinner
$border-width: 4px; //width of spinners border
$basic-spinner-dimensions: 125px; //width and height of spinner
$main-spinner-dimensions: $basic-spinner-dimensions - $border-width * 2; //width and height of bigger circle
$small-spinner-dimensions: $main-spinner-dimensions * 0.7; //width and height of smaller circle

/* COMMON STYLES: YOU DON'T NEED THEM */
body {
  background-color: $bg-color;
}

.container {
  width: 960px;
  margin: 70px auto 0px auto;
  text-align: center;
  
  
 .spinners {
    margin-top: 50px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    
    .spinner-block {
      width: $basic-spinner-dimensions;
      text-align: center;
      margin-right: 83px;
      
      &:nth-child(5n) {
        margin-right: 0px;
      }
    }
  }

/* YOU NEED THESE STYLES */

/* spinner style */
.spinner {
    position: relative;
    width: $basic-spinner-dimensions;
    height: $basic-spinner-dimensions;

    &:before,
    &:after {
      content: "";
      display: block;
      position: absolute;
      border-width: 4px;
      border-style: solid;
      border-radius: 50%;
    }
  }

/* spinner-1 styles */
.spinner.spinner-1 {
  
    @keyframes rotate-animation {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes anti-rotate-animation {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(-360deg);
    }
  }
  
  &:before {
    
    width: $main-spinner-dimensions;
    height: $main-spinner-dimensions;
    border-bottom-color: $basic-dark-color;
    border-right-color: $basic-dark-color;
    border-top-color: rgba($basic-dark-color, 0);
    border-left-color: rgba($basic-dark-color, 0);
    top: 0px;
    left: 0px;
    animation: rotate-animation 1s linear 0s infinite;
  }
  
  &:after {
    width: $small-spinner-dimensions;
   ...