我希望根据值增加在进度条中填充多种颜色

Question

1. 目前在半弧进度条中填充了静态颜色，但我想根据值的增加用多种颜色填充它。
2. 在圆弧上完全旋转的时候，圆弧不是完全在弧上。 提前致谢。

var dial = $(".dial .inner");
var gauge_value = $(".gauge .value");

function rotateDial()
{
    var deg = 0;
    var value = Math.round(Math.random()*100);
    deg = (value * 177.5) / 100;

    gauge_value.html(value + "%");

    dial.css({'transform': 'rotate('+deg+'deg)'});
    dial.css({'-ms-transform': 'rotate('+deg+'deg)'});
    dial.css({'-moz-transform': 'rotate('+deg+'deg)'});
    dial.css({'-o-transform': 'rotate('+deg+'deg)'}); 
    dial.css({'-webkit-transform': 'rotate('+deg+'deg)'});
}

setInterval(rotateDial, 2000);

html,
body {
  padding: 0;
  margin: 0;
}

body,
.dial {
  background-color: #000;
  overflow: hidden;
}

.gauge {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 30px;
  left: 50%;
  margin-left: -250px;
  border-radius: 100%;
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform: rotate(0deg);
  z-index: 9999;
}

.meter {
  margin: 0;
  padding: 0;
}

.meter > li {
  width: 250px;
  height: 250px;
  list-style-type: none;
  position: absolute;
  border-top-left-radius: 250px;
  border-top-right-radius: 0px;
  transform-origin: 100% 100%;
  ;
  -webkit-transform-origin: 100% 100%;
  ;
  -ms-transform-origin: 100% 100%;
  ;
  transition-property: -webkit-transform;
  pointer-events: none;
}

.meter .low {
  transform: rotate(0deg);
  /* W3C */
  -webkit-transform: rotate(0deg);
  /* Safari & Chrome */
  -moz-transform: rotate(0deg);
  /* Firefox */
  -ms-transform: rotate(0deg);
  /* Internet Explorer */
  -o-transform: rotate(0deg);
  /* Opera */
  z-index: 8;
  background-color: #09B84F;
}

.meter .normal {
  transform: rotate(47deg);
  /* W3C */
  -webkit-transform: rotate(47deg);
  /* Safari & Chrome */
  -moz-transform: rotate(47deg);
  /* Firefox */
  -ms-transform: rotate(47deg);
  /* Internet Explorer */
  -o-transform: rotate(47deg);
  /* Opera */
  z-index: 7;
  background-color: #FEE62A;
}

.meter .high {
  transform: rotate(90deg);
  /* W3C */
  -webkit-transform: rotate(90deg);
  /* Safari & Chrome */
  -moz-transform: rotate(90deg);
  /* Firefox */
  -ms-transform: rotate(90deg);
  /* Internet Explorer */
  -o-transform: rotate(90deg);
  /* Opera */
  z-index: 6;
  background-color: #FA0E1C;
}

.dial,
.dial .inner {
  width: 470px;
  height: 470px;
  position: fixed;
  top: 10px;
  left: 5px;
  border-radius: 100%;
  border-color: purple;
  z-index: 10;
  transition-property: -webkit-transform;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
  transform: rotate(0deg);
  /* W3C */
  -webkit-transform: rotate(0deg);
  /* Safari & Chrome */
  -moz-transform: rotate(0deg);
  /* Firefox */
  -ms-transform: rotate(0deg);
  /* Internet Explorer */
  -o-transform: rotate(0deg);
  /* Opera */
}

.dial .arrow {
  width: 35px;
  height: 35px;
  position: absolute;
  top: 225px;
  left: -1px;
  /* Safari & Chrome */
  /* Firefox */
  /* Internet Explorer */
  /* Opera */
  background: #fff;
  border-radius: 100%;
  z-index: 1000;
  margin-left: -29px;
}

.gauge .value {
  font-family: 'Josefin Slab', serif;
  font-size: 50px;
  color: #ffffff;
  position: absolute;
  top: 142px;
  left: 45%;
  z-index: 11;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="gauge">
  <ul class="meter">
    <li class="low"></li>
    <li class="normal"></li>
    <li class="high"></li>
  </ul>

  <div class="dial">
    <div class="inner">
      <div class="arrow">
      </div>
    </div>
  </div>

  <div class="value">
    0%
  </div>

</div>