javascript - 在CSS中创建进度轮

我想在html和css中创建进度轮，如果需要的话还可以比jQuery。我创建了一个轮子，但是问题是如何根据给定的百分比设置边框的长度。
这是代码：

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
}

<div class="loader"></div>

它在上面创建了一个圆圈和蓝色边框，但我想要下面的图像。

最佳答案

这是我制作的radial progress bar。我已经更新了它以满足您的需求。

填充百分比由赋予transform和rotate的.pure-css .semi.right .circle .pure-css .semi.left .circle值确定

.pure-css {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  color: #fff;
}

.pure-css .semi {
  width: 50%;
  height: 100%;
  position: relative;
  display: inline-block;
  float: left;
  overflow: hidden;
  z-index:2;
  transform:rotate(30deg)
}

.pure-css .semi.left{
  transform-origin:100% 50%;
 }
.pure-css .semi.right{
  transform-origin:0% 50%;
 }
.pure-css .semi.right .circle {
  border-top-left-radius: 150px;
  border-bottom-left-radius: 150px;
  border-right: 0;
  transform: rotate(181deg) translate(-100%, 0);
  animation: rotate 4s linear forwards;
  transform-origin: 0% 50%;
}

.pure-css .semi.left .circle {
  border-top-right-radius: 150px;
  border-bottom-right-radius: 150px;
  border-left: 0;
  transform: rotate(36deg) translate(100%, 0);
  animation: rotate2 4s linear forwards;
  transform-origin: 100% 50%;
  animation-delay: 42s;
}

.pure-css .semi .circle {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 50px solid #4ec9aa;
}

.pure-css .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  overflow: hidden;
  font-size: 28px;
  color:#28645d;
  text-align:center;
}
.pure-css .shade {
  width: 100%;
  height: 100%;
  transform:scale(.9,.9);
  border-radius: 50%;
  box-sizing: border-box;
  border: 30px solid #e7ebee;
}

<div class="rp">
    <div class="pure-css">
      <div class="semi left">
        <div class="circle"></div>
      </div>
      <div class="semi right">
        <div class="circle"></div>
      </div>
      <div class="text">
        <span class="num">Goal<br><b>20,000$</b></span>
      </div>
      <div class="shade"></div>
    </div>
  </div>

要更改填充值，请给

.pure-css .semi.left .circle{
    transform: rotate(xdeg) translate(-100%, 0);
}
.pure-css .semi.right.circle{
    transform: rotate(xdeg) translate(-100%, 0);
}

其中x是0到180之间的值（可选），将180赋予.semi.right将填充半个圆，而180赋予.semi-left将填充整个圆。

要根据百分比值进行填充，将50%的transform设置为.semi.right .circle，将percentage * 360 / 100 deg的变换设置为50%。

用于确定填充值的开始和结束位置

.pure-css .semi {
   transform:rotate(xdeg)
}