title: Make HTML5 spinner stop in center of segment
body: <p>JSFiddle link - <a href="http://jsfiddle.net/lustre/p0z9wp51/1/" rel="nofollow">http://jsfiddle.net/lustre/p0z9wp51/1/</a></p>
  
  <p>I didn't create this code, but the blog which it was created from isn't working at the moment...</p>
  
  <p>Is it possible to have the spinner center itself on the segment it lands on? For example, sometimes it may just land on segment "A", could it then shift to center itself on segment "A"? Or would that require a complete rebuild of the spinner itself?</p>
  
  <p>It's worth noting that the number of segments is dynamic, in that users can add their own names.</p>
  
  <p>The code below begins the spin, and calculates the angle, and total time to spin.</p>
  
  <pre><code>spin: function() {
      spinAngleStart = Math.random() * 10 + 10;
      spinTime = 0;
      spinTimeTotal = Math.random() * 3 + 4 * 1000;
      rotateWheel();                
  },
  </code></pre>
  
  <p>And this code actually rotates the wheel (afaik).</p>
  
  <pre><code>var rotateWheel = function rotateWheel() {
      spinTime += 30;
  
      if(spinTime &gt;= spinTimeTotal) {
          stopRotateWheel();
          return;
      }
  
       var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
        startAngle += (spinAngle * Math.PI / 180);
        drawWheel();
        spinTimeout = setTimeout(rotateWheel, 30);
  }
  </code></pre>
  
  <p><code>index</code> returns the segment/array index of the section it's landed on.
  <code>outterRadius</code> is the radius of the outer circle. Responsively, the circle is resized with CSS percentages, would this affect the outer radius in HTML5? Or not as it's rendered before the CSS takes effect?</p>
  
  <p>If it would require a complete rebuild, that's fine. Just looking for feedback on whether it's even possible with this code from people more experience in HTML5 than me :)</p>