SOURCE

function range() {
	var query = document.querySelector.bind(document);
  var value = query('#myRange').value;
  var circle = query('.circle');
	var number = query('.number');
	var rotate = 180 * value/100;
	number.innerText = value +'%';
	circle.style.transform='rotate('+rotate+'deg)';
}

<div class="outter">
  <div class="bg">
    <div class="circle">
    </div>
    <p class="number">
      75%
    </p>
  </div>
</div>
<br />
拖动改变数值
<div>
  <input type="range" id="myRange" onchange="range()">
</div>

body {
  background: #fff;
}

.outter {
  height: 150px;
  width: 300px;
  overflow: hidden;
}

.bg {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: linear-gradient(to right, #fff, #ff6633);
}

.bg .number {
  position: relative;
  z-index: 2;
  padding-top: 35%;
  text-align: center;
}

.bg:before {
  content: "";
  width: 80%;
  height: 80%;
  background: #fff;
  display: block;
  border-radius: 50%;
  position: absolute;
  top: 10%;
  left: 10%;
}

.bg .circle {
  content: "";
  width: calc(100% + 2px);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(50%);
  transform-origin: 50% 100%;
  transform: rotate(135deg);
  background: #fff;
  display: block;
  transition: 0.3s;
}