Untitled

<div class="roulette">

  <div class="ball">

    <div class="marble"></div>

  </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js" type="text/javascript"></script>

$blk: #122;

$wht: #EEE;

$red: #C21;

html {

  font-size: 4vmin;

}

.roulette {

  //animation: roll 5s linear reverse infinite;

  background-image: url("https://i.imgur.com/Gcw8Yiw.png");

  background-size: cover;

  border-radius: 100%;

  display: block;

  height: 20rem;

  position: relative;

  width: 20rem;

  &:before {

    border-radius: 100%;

    display: block;

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    content: "";

    background-color: rgba($blk, 0.67);

  }

  &:after {

    background-color: $blk;

    background-image: radial-gradient(50% 50%, $blk 0%, $red 100%);

    border-radius: 100%;

    content: "";

    display: block;

    margin: 2rem;

    position: absolute;

    top: 0; right: 0; bottom: 0; left: 0;

  }

}

.ball {

  //animation: roll 3s linear infinite;

  height: 100%;

  margin: 0 auto;

  position: relative;

  transform: rotateZ(0deg);

  width: 1rem;

}

@keyframes roll {

  0% {transform: rotateZ(0deg);}

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

}

.marble {

  position: relative;

  background: lighten($wht,85%);

  border-radius: 100%;

  border-top: 1px solid $wht;

  border-right: 0px solid rgba($wht,0.1);

  border-bottom: 2px solid rgba($blk,1);

  border-left: 0px solid rgba($wht,0.1);

  box-shadow:

    inset 0 -0.1rem 0.05rem -0.02rem rgba($wht,0.67), // bottom highlight

    inset 0 -0.2rem 0.2rem 0.2rem rgba($blk,1), // shading

    0 0.1rem 0.1rem -0.05rem rgba($blk,0.67); // drop shadow

  box-sizing: border-box;

  height: 1rem;

  margin: 0 auto;

  top: 0.33rem;

  width: 1rem;

}

.freeroll {

  &.ball {

    animation: roll 3s linear infinite;

  }

  .marble {

    animation: roll 3s linear reverse infinite;

  }

}

var numbers = [0,32,15,19,4,21,2,25,17,34,6,27,13,36,11,30,8,23,10,5,24,16,33,1,20,14,31,9,22,18,29,7,28,12,35,3,26];

var rotation = 0;

var stopped = true;

var updateSpeed = 250;

var rouletteSpeed = 200; /* 100 is slow, 500 is fast */

var stopSpeed = 37;

function roll(e) {

  var el = (typeof e === "undefined") ? document.querySelectorAll(".roulette")[0] : e;

  rotation -= updateSpeed / 1000 * rouletteSpeed;

  Velocity(el, { rotateZ: [rotation, "linear"] }, { duration: updateSpeed,

    complete: function(elem) {

      rouletteSpeed = rouletteSpeed < 0 ? 0 : Math.max(rouletteSpeed - (updateSpeed / 1000 * stopSpeed), 0);

      if(rouletteSpeed <= 0) {

        rewindRotationStyle(elem[0]);

        rotation = rotation % 360;

        rouletteSpeed = 400;

        stopped = true;

      } else {

        roll(elem);

      }

    }

  });

}

function rewindRotationStyle (e) {

  var currentRotation = parseFloat(e.style.transform.split("rotateZ(")[1].split("deg)")[0], 10);

  e.style.transform = "rotateZ(" + (currentRotation % 360) + "deg)";

}

function getRandomRouletteNumber(numbersArray) {

  return Math.floor(Math.random() * numbersArray.length);

}

function getMarbleRotation(n, numbersArray) {

  // returns the rotation angle relative to the wheel

  var position = numbersArray.indexOf(n);

  return position * (360 / numbersArray.length);

}

function rotateMarbleTo(element, angle, duration) {

  var e = document.querySelectorAll(element)[0];

  Velocity(e, { rotateZ: [angle, "circOut"] }, { duration: duration, complete: function(e) {

  } });

}

var roulette = document.querySelectorAll(".roulette")[0];

roulette.addEventListener("click", function () {

  if(stopped) {

    stopped = false;

    roll();

    rotateMarbleTo(".ball", getMarbleRotation(

      getRandomRouletteNumber(numbers)

      //0

      , numbers) + 360 * ((Math.random() * 5 >>0) + 5), 7000);

  }

});