Code Playground

@mixin rotated-text($num-letters: 40, $angle-span: 360deg) {
  $angle: $angle-span / $num-letters;
  @for $i from 1 through $num-letters {
    .char-#{$i} {
      transform: rotate($angle * $i);
    }
  }
}

.circle {
  background: #ffba00;
  border-radius: 50%;
  bottom: 0;
  height: 17.5rem;
  left: 0;
  margin: auto;
  padding: 1.25rem;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  width: 17.5rem;
  span {
    display: block;
  }
  .text {
    //font-family: ?tbd;
    height: 17.5rem;
    position: relative;
    [class*="char"] {
      height: 100%;
      width: 100%;
      margin: auto;
      min-width: 0.0625rem;
      position: absolute;
      text-align: center;
      transform-origin: center center;
      color: #f59700;
      font-weight: bold;
      font-size: 1.875rem;
    }
    @include rotated-text();
  }
}

.spin {
  position: relative;
  z-index: -1;

-webkit-transform-origin: center center;
  -moz-transform-origin: 50% 50%;
  -o-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: 50%;
  -webkit-animation: spin 12s linear infinite;
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-o-keyframes spin {
  100% {
    -o-transform: rotate(360deg);
  }
}
@-ms-keyframes spin {
  100% {
    -ms-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

/* Animate the emoji */

.emoji {
  position: absolute;
  top: 6.875rem;
  left: 6.875rem;
  font-size: 5.625rem;
  display: block;
  transform: rotate(90deg);

transform-origin: 50% 50%;
  -webkit-animation: emojiSpin 1.5s linear infinite;
}

@-webkit-keyframes emojiSpin {
  50% {
    -webkit-transform: rotate(75deg);
  }
}
@-moz-keyframes emojiSpin {
  50% {
    -moz-transform: rotate(75deg);
  }
}
@-o-keyframes emojiSpin {
  50% {
    -o-transform: rotate(75deg);
  }
}
@-ms-keyframes emojiSpin {
  50% {
    -ms-transform: rotate(75deg);
  }
}
@keyframes emojiSpin {
  50% {
    transform: rotate(75deg);
  }
}

Frontend Forever App