JSFiddle - React, Tailwind, and code Playground

by Marc Malignan

HTML

<div class="wheel">
  <div class="wheel-base"></div>
  <div class="wheel-wrapper">
    <div class="wheel-inner">
      <div class="wheel-inner-slices">
        <i></i><i></i><i></i>
        <i></i><i></i><i></i>
      </div>
      <div class="wheel-inner-numbers">
        <div>1000</div>
        <div>10</div>
        <div>5</div>
        <div>1</div>
        <div>2</div>
        <div>100</div>
        <div>2</div>
        <div>10</div>
        <div>5</div>
        <div>1</div>
        <div>2</div>
        <div>100</div>
      </div>
      <div class="wheel-inner-center"></div>
    </div>
    <div class="wheel-dots">
      <i></i><i></i><i></i>
      <i></i><i></i><i></i>
    </div>
  </div>
  <div class="wheel-cursor"></div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Poppins:700');

$nb: 12;
$size: 200px;
$outer: $size / 8;
$border: $size / 25;
$slice: 360 / $nb;

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes wiggle {
  from { transform: rotate(30deg); }
  to { transform: rotate(-30deg); }
}

body {
  margin: 20px;
  overflow: hidden;
  background: #10ca98;
}

.wheel {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  border: $outer solid #ffcd00;
  font-family: 'Poppins', sans-serif;
  
  &-cursor {
    $cursor-height: $size / 8;
    
    position: absolute;
    top: -$size / 6;
    left: 50%;
    border: $cursor-height solid #e83b67;
    border-left: $cursor-height / 2 solid transparent;
    border-right: $cursor-height / 2 solid transparent;
    border-bottom-color: transparent;
    margin-left: -$cursor-height / 2;
    transform-origin: center -$cursor-height / 2;
  }
  
  &-inner {
    position: relative;
    width: $size;
    height: $size;
    border-radius: 50%;
    background: #11b79b;
    border: $border / 2 solid #d7af29;
    overflow: hidden;

    &:before {
      position: absolute;
      content: '';
      top: -25%;
      left: 50%;
      width: 50%;
      height: 50%;
      margin-left: -$size / 4;
      background: linear-gradient(135deg, #f5cf01 50%, #faea72 65%, #f5cf01 80%);
      transform: rotate(45deg) skew(32deg, 32deg);
    }

    &-slices {
      i {
        position: absolute;
        top: 0;
        left: 50%;
        width: $border;
        height: $size;
        margin-left: -$border / 2;
        background: white;
        
        @for $i from 1 through ($nb / 2) {
          &:nth-child(#{$i}) {
            transform: rotate(0deg + ($slice * $i) + ($slice / 2));
          }
        }
      }
    }
    
    &-numbers {
      div {
        position: absolute;
        top: 0;
        left: 50%;
        width: $size / 20;
        height: $size;
        padding-top:...

JavaScript

$('.wheel').addClass('spin');

setTimeout(function() {
	$('.wheel').removeClass('spin');
}, 2000);