yup.scss

div {
  &.spinner {
    &.success:before, &.success:after  {
      border-color: rgb(45, 191, 45);
      -webkit-animation: spinner 1.2s cubic-bezier(.19,.65,.67,.91) 0s 1;
      animation: spinner 1.2s cubic-bezier(.19,.65,.67,.91) 0s 1;
    }

    &.success:after {
      content: 'F';
    }

    &.error {
      border-color: red;
    }
  }
}
// base spinner
div {
  &.spinner {
    width: 34px;
    height: 34px;
    margin-left: auto;
    margin-right: auto;
  }
  &:after, &:before {
    transition: border-color 0.5s ease;
    content: "";
    position: fixed;
    border: 2px solid rgba(255, 255, 255, 0.9);
    width: 30px;
    height: 30px;
    margin-left: -15px;
  }
  &:after {
    -webkit-animation: spinner 2.5s linear infinite;
    animation: spinner 2.5s linear infinite;
  }
  &:before {
    width: 44px;
    height: 44px;
    margin-left: -22px;
    margin-top: -7px;
    -webkit-animation: spinner 2.5s linear infinite;
    animation: spinner 2.5s linear infinite;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
  }
}

@-webkit-keyframes spinner {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}