is-loading and ui-disabled state classes

states-ui.scss

// Colors
$defaultSpinnerColor: #dbdbdb;
$primarySpinnerColor: #f0704b;
$lightSpinnerColor: #f3f3f3;
$darkSpinnerColor: #060303;

// Misc
$spinnerDefaultSize: 1rem;
$disabledUiOpacity: 0.7;

.is-loading {
  position: relative;

  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    background-color:rgba(255,255,255, 0.5);
  }

  &.btn {
    color: transparent;
    pointer-events: none;
  }

  &::after {
    -webkit-animation: spinAround 500ms infinite linear;
    animation: spinAround 500ms infinite linear;
    border: 2px solid $defaultSpinnerColor;
    border-radius: 100%;
    border-right-color: transparent;
    border-top-color: transparent;
    content: "";
    display: block;
    height: $spinnerDefaultSize;
    width: $spinnerDefaultSize;
    left: 50%;
    top: 50%;
    margin-left: -$spinnerDefaultSize/2;
    margin-top: -$spinnerDefaultSize/2;
    position: absolute !important;
  }

  &.md {
    min-height: 160px;

    &::after {
      height: $spinnerDefaultSize*2;
      width: $spinnerDefaultSize*2;
      margin-left: -($spinnerDefaultSize*2)/2;
      margin-top: -($spinnerDefaultSize*2)/2;
    }
  }

  &.primary {
    &::after {
      border: 2px solid $primarySpinnerColor;
      border-right-color: transparent;
      border-top-color: transparent;
    }
  }

  &.light {
    &::after {
      border: 2px solid $lightSpinnerColor;
      border-right-color: transparent;
      border-top-color: transparent;
    }
  }

  &.dark {
    &::after {
      border: 2px solid $darkSpinnerColor;
      border-right-color: transparent;
      border-top-color: transparent;
    }
  }
}

.ui-disabled {
  opacity: $disabledUiOpacity;
  pointer-events: none;
  cursor: not-allowed;
  user-select: none;
}

@keyframes spinAround {
    from { transform: rotate(0deg)}
        
    to { transform: rotate(359deg)}
}

test.html

<!-- Apply a loading spinner on button -->
<a href="#" class="btn btn-primary is-loading">Cool Button</a>

<!-- Apply a loading spinner on div -->
<div class="container is-loading md primary">
  Body content...
</div>

<!-- Disable an element -->
<div class="container ui-disabled">
  Body content...
</div>

<!-- Disable an element with loading spinner -->
<button class="btn btn-primary ui-disabled is-loading">
  Go Live
</div>