使用CSS和JS创建动画半圆技能栏

Question

我正在尝试制作一个动画半圆技能栏，仅基于CSS和JS（没有jQuery或其他框架）。

这是一个非常糟糕的MS Paint绘图示例：

技能栏的蓝色部分需要在页面加载时设置动画，动画百分比从0开始计数。

需要在HTML中设置百分比数量和蓝色技能栏的数量。整个事情需要做出回应。

我开始将设计创建为普通的技能栏，但对于我的生活，我无法弄清楚如何将其弯曲成半圆形。

let start // set on the first step to the timestamp provided
const el = document.getElementById('count') // get the element
const final = parseInt(el.textContent, 10) // parse out the final number
const duration = 2000 // duration in ms
const step = ts => {
  if (!start) {
    start = ts
  }
  // get the time passed as a percentage of total duration
  let progress = (ts - start) / duration

  el.textContent = Math.floor(progress * final) // set the text
  if (progress < 1) {
    // if we are not 100% complete, request another animation frame
    requestAnimationFrame(step)
  }
}

// start the animation
requestAnimationFrame(step)

.outerbar {
  width: 100%;
  height: 20px;
  background-color: #eee;
  border-radius: 100px;
}

.bar {
  background: #1565C0;
  border-radius: 100px;
  height: 100%;
  transition: width 1s linear;
  float: left;
  min-width: 30px;
}

.text-label {
  font-size: 14px;
  text-align: center;
}

.percent-label {
  float: right;
  margin-right: 5px;
  font-size: 12px;
  line-height: 1.7em;
}


/* Animate the blue skill bar on page load */
@-webkit-keyframes bar {
  0% {
    width: 0;
  }
}

@-moz-keyframes bar {
  0% {
    width: 0;
  }
}

@keyframes bar {
  0% {
    width: 0;
  }
}

.bar {
  -webkit-animation: bar 2s ease-in-out;
  -moz-animation: bar 2s ease-in-out;
  animation: bar 2s ease-in-out;
}

<div class="outerbar">
  <div class="bar" style="width: 40%;">
    <div class="percent-label"><span id="count">40</span>%</div>
  </div>
</div>
<div class="text-label">Total Score</div>