javascript - 在 CSS 中创建进度轮

Question

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

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

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

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

Answer 1

这是一个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 之间的值(可选)，给 .semi.right 180 将填充半个圆，给 .semi-left 180 将填充整个圆圈。

按照百分比值填充，填充<50%设置.semi.right .circle的transform为percentage * 360/100 deg 并填充 > 50% 将 .semi.left .circle 的变换设置为 180 - (percentage * 360/100) deg.

用于确定填充值的起止位置

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