Wheel

by Shuaib Khan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css">
<div class="text-center svg-wrap">
  <svg viewBox="-1 -1 2 2" style="transform: rotate(0deg)"></svg>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/OOjs_UI_indicator_arrow-down.svg/2000px-OOjs_UI_indicator_arrow-down.svg.png" class="arrow-img">
</div>

<div class="text-center">
  <button id="btn" class="btn btn-md btn-primary" onClick="clickBtn()">
  Spin
</button>
</div>

<hr>
<br><br>
<h4 class="text-center">
    Cutomise the Wheel
</h4>
<br><br>
  <div class="container-fluid" style="margin-bottom:50px">
    <form class="wheelForm">
      <div class="row fieldR">
        <div class="col">
          <input type="text" class="form-control" name="label1" value="1" placeholder="Number">
        </div>
        <div class="col">
          <input type="text" class="form-control" name="val1" value="50" placeholder="Value">
        </div>
      </div>
      <div class="row fieldR">
        <div class="col">
          <input type="text" class="form-control" name="label2" value="2" placeholder="Number">
        </div>
        <div class="col">
          <input type="text" class="form-control" name="val1" placeholder="Value" value="60">
        </div>
      </div>
      <div class="row fieldR">
        <div class="col">
          <input type="text" class="form-control" name="label2" value="2" placeholder="Number">
        </div>
        <div class="col">
          <input type="text" class="form-control" name="val1" placeholder="Value" value="60">
        </div>
      </div>
    </form>
  </div>
  
  
  
  
  
  
<script>
let parts = $(".fieldR").length;
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
 let rotation = [500, 1000,...

CSS

.svg-wrap{
  position: relative;
}
.svg-wrap .arrow-img{
  position:absolute;
  width: 30px;
  top:5px;
  left: 50%;
  margin-left: -15px;
}
svg {
  height: 350px;
  -webkit-transition: all 5s cubic-bezier(0.25, 0.1, 0.25, 1);
  -webkit-transform: rotate(0deg);
  margin: 20px auto;
}