A CodePen by A973C. Spin the Wheel - Cross Browser - // uses raphaeljs

index.html

<div class="spin_widget">
  <div class="wheel_holder" id="the_wheel">
    <div class="assests" style="display: none">
      <img src="https://dl.dropboxusercontent.com/s/du2xrt3903k34b2/spinner-wheel_board__bg.png?token_hash=AAHefLlKqPXsIxfza_HfuvEfRwZnY5EWMYOGA5kt3FZv4Q&dl=1" alt="" id="wheel_bg"/>
      <img src="https://dl.dropboxusercontent.com/s/p1grg6kuspaklqe/spinner-wheel_board__highlight.png?token_hash=AAFEC_xUVm6Na2aYdb0jcdC1-1q-0f3svu5uOQPwYIEu1A&dl=1" alt="" id="highlights" />
      <img id="wheel" class="wheel" src="https://dl.dropboxusercontent.com/s/6ngd3cir5xsh0ud/spinner-wheel_board__content.png?token_hash=AAH7POtGmIwkgg0DPAXYMuEAgs_6597rp3uX7bNnd3qi-w&dl=1" alt="" />
    <img id="needle" src="https://dl.dropboxusercontent.com/s/e3vqwrud9zbi185/spinner-needle.png?token_hash=AAF9of63bm8-N0cFzBBJRSNOwegi-QZyoxyKdFSMGkflzg&dl=1" />
    <img src="https://dl.dropboxusercontent.com/s/zacc6u68fa242no/spinner-pin.png?token_hash=AAEuCX0H3IuKOgJPT6blTpfsRgTQhjNOQY8-w5L_xOh9HA&dl=1" alt="" id="pin" />
    </div>
  </div>
  
  <div class="content">
    <div id="action_text">
      <h1><div>Spin the wheel</div> <div>win <span class="highlight">Rs 1 to 10, 000</span></div> <div>Gauranteed!</div></h1>
      <img src="http://s21.postimg.org/ixb2tiqbr/btn_spin_enabled_bg.png" alt="" id="btn_spin_me" style="display: none"/>
    </div>
    <div id="result_text" class="hide">
      <h1>
        <div class="highlight">Congrats</div> 
        <div>you won Rs <span id="prize_money" class="highlight"></span></div>
      </h1>
      <div class="btn play">Play</div>
      <p>
        Log in and play daily to spin more and WIN more!
      </p>
    </div><!--result_text-->
  </div>
</div>

script.coffee

Raphael ->
  wheel_bg_src      = document.getElementById('wheel_bg').src
  wheel_src      = document.getElementById('wheel').src
  highlight_src  = document.getElementById('highlights').src
  pin_src        = document.getElementById('pin').src
  needle_src     = document.getElementById('needle').src
  btn_spin_src     = document.getElementById('btn_spin_me').src
  
  paper = Raphael("the_wheel", 800, 400)
  wheel_bg = paper.image(wheel_bg_src, 0, 0, 400, 400)
  wheel = paper.image(wheel_src, 0, 0, 400, 400)
  pin = paper.image(pin_src, 150, 150, 97, 98)
  highlight = paper.image(highlight_src, 0, 0, 400, 400)
  needle = paper.image(needle_src, 185, -10, 29, 64)
  btn_spin = paper.image(btn_spin_src, 500, 220, 309, 87)
  
  deg_inc = 360/12
  money_map =
    '500': 0
    '10': deg_inc
    '200': deg_inc*2
    '5': deg_inc*3 
    '2000': deg_inc*4
    '1': deg_inc*5
    '5000': deg_inc*6
    '100': deg_inc*7
    '1000': deg_inc*8
    '50': deg_inc*9
    '10000': deg_inc*10
    '25': deg_inc*11
  
  # returns the a random value b/w `from` and `to`
  randomFromInterval = (from, to) ->
    Math.floor( Math.random()*(to-from+1) + from)

  # fake server response factory for win money
  get_win_value = (money_map) ->
    val = for money, degree of money_map
      'money': money, 'degree': degree
    val[randomFromInterval(0, val.length)]

  # display result
  show_result = (win_value) ->
    btn_spin.hide()
    action_text = document.getElementById('action_text')
    action_text.parentNode.removeChild(action_text)
    document.getElementById("result_text").className = ""
    document.getElementById("prize_money").innerHTML = win_value.money + '!'
    
  # wheel spinner
  spin_the_wheel = (win_value) ->
    angle = 5*360+win_value.degree+randomFromInterval(-10, 10)
    needle.animate({transform: "0r" + -5}, 500, "<>")
    wheel.stop().animate({transform: "r" + angle}, 5000, "cubic-bezier(0.100, 0.300, 0.700, 1.050)", (e) ->
      needle.animate({transform: "0r" + 0}, 300, "<>", show_result(win_value))                       
    )
  
  btn_spin.click (e) ->
    win_value = get_win_value(money_map)
    spin_the_wheel(win_value)
    btn_spin.unclick() 
    

style.scss

@import "compass";
$wheel_height: 400px;
$wheel_width: $wheel_height;

.spin_widget{
  position: relative;
  color: #fff;
  background-color: black;
  height: 500px;
  .hide{
      display: none;
  }
  
  .content{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    margin-top: -150px;
    margin-left: 40px;
    text-align: center;
    h1{
      text-transform: uppercase;
      .highlight{
        color: orange;
      }
    }
    .btn.play {
      width: 262px;
      height: 77px;
      margin: 0 auto;
    }
  }
    
  .wheel_holder{
    .assests{
      display: none;
    }
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -($wheel_width/2 + 200px);
    margin-top: -$wheel_height/2;
    text-align: center;
  }
}

.btn{
  border: none;
  text-indent: -9999;
  font-size: 0;  
  &.play{
    width: 262px;
    height: 77px;
    background: url('http://s24.postimg.org/8ub7mziqd/btn_spin_play.png');
  }
}